css3 3D变换 – CSS3高级教程 css33d变换|CSS

上一章CSS3高级教程请查看：css3 2D变换
CSS3三维变换功能允许元素在三维空间中变换。
元素3D变换使用CSS3 3D变换功能，你可以执行基本的变换操作，如在三维空间中的移动、旋转、缩放和倾斜元素。
转换后的元素不会影响周围的元素，但是可以重叠它们，就像绝对定位的元素一样。但是，转换后的元素仍然在布局的默认位置(未转换)占据空间。
使用CSS变换和变换函数CSS3转换属性使用转换函数来操作元素使用的坐标系统，以便应用转换效果。
下面介绍三维变换函数：
translate3d()函数
将元素从当前位置沿X、Y和z轴移动到新的位置，这可以写成translate(tx, ty, tz)，第三个翻译值参数(即tz)不允许有百分比值。

.container { width: 125px; height: 125px; perspective: 500px; border: 4px solid #e5a043; background: #fff2dd; } .transformed { -webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */ transform: translate3d(25px, 25px, 50px); /* 标准语法 */

函数translate3d(25px, 25px, 50px)将图像沿X轴和y轴正方向移动25个像素，沿z轴正方向移动50个像素。

文章图片
然而，3D变换使用的是三维坐标系，但是沿着z方向的移动并不总是显而易见的，因为元素存在于二维平面(平面)上，没有深度。
perspective透视和perspective-origin透视原点CSS属性可以通过使z轴上的元素看起来更大，也就是离观者更近的元素看起来更大，离观者更远的元素看起来更小来增加场景的深度感。
注意：如果你在没有设置透视的情况下对一个元素应用3D变换，结果将不会显示为三维效果。
rotate3d()函数
rotate3d()函数以[x,y,z]方向向量为圆心，旋转三维空间中的元素。这个可以写成旋转(vx, vy, vz，angle)：

.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #a2b058; background: #f0f5d8; } .transformed { -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */ transform: rotate3d(0, 1, 0, 60deg); /* 标准语法 */ }

函数rotate3d(0,1,0,60度)将图像沿y轴旋转60度，可以使用负值将元素旋转到相反的方向。

文章图片
scale3d()函数
【css3 3D变换 – CSS3高级教程】scale3d()函数的作用是：改变元素的大小，它可以写成scale(sx, sy, sz)，这个函数的效果并不明显，除非你将它与其他转换函数(如rotate和perspective)结合使用，如下面的示例所示。

.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #6486ab; background: #e9eef3; } .transformed { -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */ transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* 标准语法 */ }

函数scale3d(1,1,2)将元素沿z轴缩放，函数rotate3d(1,0,0,60deg)将图像沿x轴旋转60度。

文章图片
matrix3d()函数
matrix3d()函数可以同时执行所有的3D转换，比如平移、旋转和缩放，它以一个4×4变换矩阵的形式取16个参数。
下面是使用matrix3d()函数执行3D转换的一个示例。

.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #d14e46; background: #fddddb; } .transformed { -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Chrome, Safari, Opera */ transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* 标准语法 */ }

但是，当一次执行多个转换时，使用单个转换函数并按顺序列出它们会更方便，如下所示：

.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #a2b058; background: #f0f5d8; } .transformed { -webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */ transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* 标准语法 */ }

3d转换函数下表提供了所有3D转换函数的简要概述。

函数	描述
translate3d(tx,ty,tz)	沿着X、Y和z轴移动给定数量的元素。
translateX(tx)	沿着x轴移动给定数量的元素。
translateY(ty)	沿着y轴移动给定数量的元素。
translateZ(tz)	沿着z轴移动给定数量的元素。
rotate3d(x,y,z,?a)	以[x,y,z]方向向量为中心，按最后一个参数指定的角度旋转3D空间中的元素。
rotateX(a)	将元素绕x轴旋转给定的角度。
rotateY(a)	将元素绕y轴旋转给定的角度。
rotateZ(a)	将元素绕z轴旋转给定的角度。
scale3d(sx,sy,sz)	将元素沿X、Y和z轴按给定数量缩放，函数scale3d(1,1,1)没有作用。
scaleX(sx)	将元素沿x轴缩放。
scaleY(sy)	将元素沿y轴缩放。
scaleZ(sz)	将元素沿z轴缩放。
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	以16个值的4×4变换矩阵的形式指定一个3D变换。
perspective(length)	定义3D转换元素的透视图。通常，随着该函数值的增加，元素将出现在离查看器更远的地方。