《图解CSS3》笔记2 transform变形

2D transform支持4种变形方式和矩阵, 多种变形函数以空格隔开：

1. 移动　　translate(+-xOffset, yOffset)　　+右移-左移

2. 缩放　　scale(0.01~0.99| >1)　　　　　　0.01~0.99为缩小，>1为放大

3. 翻转　　skew()

4. 旋转　　rotate(+-Xdeg)　　　　　　　　+顺时针转，-逆时针转X度

5. 矩阵　　matrix()

 

3D transform支持3种变形方式和矩阵, 多种变形函数以空格隔开：

1. 移动　　translate3d(x, y, z)　　　　　translateZ()

2. 缩放　　scale3d()　　　　　　　　　　scaleZ()　　　　　

3. 旋转　　rotate3d()　　　　　　　　　 rotateZ()  rotateX() rotateY()

4. 矩阵　　matrix3d()

5. 投影　　perspective() 

 

transform-origin: 用来指定变形时，元素中心点的位置（默认：50%），取值有两类：

　　1. 关键字：　　left center right | top center bottom

　　2. 偏移量:　　 -100% 0% 50% 100% 200%

 

transform-style: 指定3D控件中，内嵌子元素如何呈现，两个值：

　　1. flat：　　　(默认)子元素在2D*面呈现

　　2. perserve-3d: 子元素呈现在前面或后面

 

perspective:　　观察者与元素3D控件内Z*面的距离（视距）：

　　1. none　　(默认)无线远的角度来看，*乎于*

　　2. 数值　　数值越大，距离越远，感受越不明显；数值越小，距离越*，感受明显；

 

backface-visibility： 元素的背面是否可见，有两个值： visible | hidden；

　　如果设置为hidden，当元素选择rotateY(90deg)之后，就看不到了；如果设置为visible，选择90deg后，看到的是对称的镜面影像；

 

因此构造正反面均存在，并且可以旋转的元素，则是：

　　旋转父元素(rotateY(...deg))，其内部的两个子元素对应正反面（正反面均：backface-visibility: hidden；反面：rotateY(180deg)）；（参看chapter-11-11）