CSS 3D变换
-
CSS转换
CSS变换允许您平移,旋转,缩放和倾斜元素。变换是一种让元素改变形状,大小和位置的效果。CSS支持2D和3D转换。 -
3D变换浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。属性 Internet Explorer Chrome FireFox Safari Opera 属性格式 transform 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit- transform-origin (三个值的语法) 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit- transform-style 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit- perspective 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit- perspective-origin 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit- backface-visibility 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit- -
CSS 3D变换
在本章中,您将了解以下3D转换方法:- rotateX()
- rotateY()
- rotateZ()
-
rotateX()方法
rotateX()方法以给定的角度围绕其X轴旋转元素:
尝试一下#myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); }
-
rotateY()方法
rotateY()方法以给定的角度围绕其Y轴旋转元素:
尝试一下#myDiv { -webkit-transform: rotateY(130deg); /* Safari */ transform: rotateY(130deg); }
-
rotateZ()方法
rotateZ()方法以给定的角度围绕其Z轴旋转元素:
尝试一下#myDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); }
-
CSS变换属性
下表列出了所有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) 定义一个3D转换,只使用x轴的值 translateY(y) 定义一个3D转换,只使用y轴的值 translateZ(z) 定义一个3D转换,只使用z轴的值 scale3d(x,y,z) 定义一个三维变换 scaleX(x) 通过给出x轴的值来定义一个三维尺度变换 scaleY(y) 通过给出y轴的值来定义三维尺度变换 scaleZ(z) 通过给出z轴的值来定义一个三维尺度变换 rotate3d(x,y,z,angle) 定义一个3D旋转 rotateX(angle) 定义沿x轴的三维旋转 rotateY(angle) 定义沿y轴的三维旋转 rotateZ(angle) 定义沿z轴的三维旋转 perspective(n) 定义3D转换元素的透视图 -
相关页面
HTML教程:HTML样式