css3 3D变换 – CSS3高级教程

上一章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()函数

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转换函数的简要概述。