CSS3 3D转换
CSS 除了支持上一章节的2D转换,还支持 3D 转换。2D转换是基于水平面的转换,3D则是立体的,可以通过以下对比来了解CSS 2D和3D转换的区别。
2D rotate
3D rotate
CSS 3D 转换浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
属性 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 3D 转换方法
通过 CSS transform 属性,您可以使用以下 3D 转换方法:
- rotateX()
- rotateY()
- rotateZ()
CSS 3D 转换示例
rotateX() 方法
rotateX() 方法使元素绕其 X 轴旋转给定角度:
示例
#myDiv {
transform: rotateX(150deg);
}
rotateY() 方法
rotateY() 方法使元素绕其 Y 轴旋转给定角度:
示例
#myDiv {
transform: rotateY(130deg);
}
rotateZ() 方法
rotateZ() 方法使元素绕其 Z 轴旋转给定角度:
示例
#myDiv {
transform: rotateZ(90deg);
}
CSS 转换属性
下表列出了所有 3D 变换属性:
属性 | 描述 |
---|---|
transform | 向元素应用 2D 或 3D 转换。 |
transform-origin | 允许你改变被转换元素的位置。 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
perspective | 规定 3D 元素的透视效果。 |
perspective-origin | 规定 3D 元素的底部位置。 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 |
CSS 3D 转换方法
函数 | 描述 |
---|---|
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4×4 矩阵。 |
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 转换元素的透视视图。 |
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/59511.html