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)