CSS3 3D 转换
3D 转换
CSS3 3D 化。
中的一些 3D
- rotateX()
- rotateY()
看 2D 转换与 3D
2D 旋转
3D 旋转
？
果。
2D 或 3D
| 属性 | |||||
|---|---|---|---|---|---|
| transform | |||||
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 3D 支持 2D 转换）。
rotateX() 方法
通过 rotateX() 围绕其 X 转。
实例
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
rotateY() 旋转
通过 rotateY() 围绕其 Y 转。
实例
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
转换属性
：
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 2D 或 3D 转换。 | 3 |
| transform-origin | 的位置。 | 3 |
| transform-style | 3D 。 | 3 |
| perspective | 规定 3D 效果。 | 3 |
| perspective-origin | 规定 3D 位置。 | 3 |
| backface-visibility | 。 | 3 |
2D Transform 方法
| 函数 | 描述 |
|---|---|
| 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) | 定义 3D 用用于 X 轴的值。 |
| translateY(y) | 定义 3D 用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D |
| scaleX(x) | 定义 3D 个 X 轴的值。 |
| scaleY(y) | 定义 3D 个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D |