CSS3 3D变换
CSS3允许你格式化使用3D转换的元素。
将鼠标悬停在下面的内容看2D和3D变换之间的区别：
2D转
3D旋转
对于3D变换浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次通过数字-webkit-, -moz- ，或-o-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 3D变换
在本章中，您将了解以下3D转换方法：
-
rotateX() -
rotateY() -
rotateZ()
该rotateX()方法
所述rotateX()方法在给定的程度绕其X轴的元素：
该rotateY()方法
所述rotateY()方法在给定的程度绕其Y轴的元素：
该rotateZ()方法
所述rotateZ()方法在给定的程度绕其Z轴的元素：
自测练习用！
CSS3转换属性
下表列出了所有的3D转换属性：
| 属性 | 描述 |
|---|---|
| transform | 适用的2D或3D变换到一个元素 |
| transform-origin | 允许你改变转化元素位置 |
| transform-style | 指定如何嵌套元素呈现在3D空间 |
| perspective | 指定在被认为怎样3D元素的视角 |
| perspective-origin | 指定3D元素的底部位置 |
| backface-visibility | 定义时不要对着屏幕上的元素是否应该可见 |
3D变换方法
| 功能 | 描述 |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义3D变换，使用16值的4x4矩阵 |
| translate3d(x,y,z) | 定义一个3D转换 |
| translateX(x) | 定义了一个三维平移，仅使用值X轴 |
| translateY(y) | 定义了一个三维平移，仅使用用于Y轴的值 |
| translateZ(z) | 定义了一个三维平移，仅使用值的Z轴 |
| scale3d(x,y,z) | 定义一个3D缩放转换 |
| scaleX(x) | 通过赋予一个值X轴限定了三维尺度变换 |
| scaleY(y) | 通过给为Y轴值定义一个3D缩放转换 |
| scaleZ(z) | 通过给一个值的Z轴限定了三维尺度变换 |
| rotate3d(x,y,z,angle) | 定义一个3D旋转 |
| rotateX(angle) | 限定沿X轴的3D旋转 |
| rotateY(angle) | 限定沿Y轴的3D旋转 |
| rotateZ(angle) | 限定沿Z轴的3D旋转 |
| perspective(n) | 定义透视图的3D转换的元素 |