[分享]css中3d相关的变形

CSS3中引入了3D变换，以便可以在3D环境中对元素进行变形。下面我们来详细了解下CSS3中3D变换相关的内容。

转换

transform: translate3d(50px, 60px, 0px); 

translate3d函数可以通过三维坐标来描述元素的移动。第一个参数控制x轴的位移，第二个参数控制y轴的位移，第三个参数控制z轴（深度）的位移。

transform: rotateX(45deg); 

rotateX函数可以控制元素绕x轴进行旋转。参数为旋转的角度值。

transform: rotateY(45deg); 

rotateY函数可以控制元素绕y轴进行旋转。参数为旋转的角度值。

transform: rotateZ(45deg); 

rotateZ函数可以控制元素绕z轴进行旋转。参数为旋转的角度值。

缩放

transform: scale3d(1.5, 1.5, 1.5); 

scale3d函数可以通过三个参数控制元素的缩放。第一个参数控制宽度的缩放比例，第二个参数控制高度的缩放比例，第三个参数控制深度的缩放比例。

倾斜

transform: skewX(30deg); 

skewX函数可以控制元素绕x轴进行倾斜。参数为倾斜的角度值。

transform: skewY(30deg); 

skewY函数可以控制元素绕y轴进行倾斜。参数为倾斜的角度值。

矩阵变换

transform: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p); 

使用matrix3d函数可以进行任意的三维变换。这个函数需要16个参数，这些参数定义了一个4x4的矩阵。

透视效果

perspective(1000px); 

perspective函数可以控制元素的透视效果。参数是一个数字，表示观察者距离元素的距离。透视的值越大，元素和观察者之间的距离就越远，透视效果就越明显。