CSS3学习之3D Transform

• CSS3 3D Transform
• Transform-style和Perspective属性
• CSS3 3D transform变换不过如此

CSS3 3D Transform

三维变换使用基于二维变换的相同属性，如果熟悉了二维变换，我们会发现3D变换的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：

• 3D位移：CSS3中的3D位移主要包括 translateZ() 和 translate3d() 两个功能函数；
• 3D旋转：CSS3中的3D旋转主要包括 rotateX()、rotateY()、rotateZ() 和 rotate3d() 四个功能函数；
• 3D缩放：CSS3中的3D缩放主要包括 scaleZ() 和 scale3d() 两个功能函数；
• 3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数 matrix3d()。

与 2D Transform 类似，3D Transform 也可以使用多重变形，他们之间使用空格分隔，语法如下：

transform: <transform-function> [<transform-function>]*

浏览器兼容性

Property	Chrome	IE	Firefox	Safari	Opera
transform	36.0	10.0	16.0	9.0	23.0
transform-origin	36.0	10.0	16.0	9.0	23.0

transform 和 transform-origin 两个CSS属性与 2D Transform 一样

3D 转换函数

首先放一下下面示例所用到的公共代码：

.transform3d {
    width: 300px;
    height: 240px;
    position: relative;
    background: url(bg.jpg) repeat center center;
    perspective: 1200px;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
}
.container .pic {
    position: absolute;
    margin-left: -35px;
    margin-top: -50px;
    width: 70px;
    height: 100px;
    background: url(card-king.png) no-repeat center center;
    background-size: 100%;
}
.clear {
    clear: both;
}

<div class="transform3d">
    <div class="container">
        <div class="pic"></div>
        <div class="pic"></div>
    </div>
</div>
<div class="clear"></div>

这两段代码形成的效果如下：

其实这是两张扑克牌叠放在一起，看起来像一张似的，可以通过开发者工具查看；这样做是为了让3D转换效果看起来更明显，第一张作为对比，一般不动，3D转换时将效果应用在第二张上。另外还将第一张图片调为半透明，方便观察转换效果。

CSS3 3D 位移

在CSS3中3D位移主要包括 translateZ() 和 translate3d() 两个函数：

• translateZ(tz) ：可以让元素沿Z轴进行位移，当其值为负值时，元素在Z轴越移越远，导致元素变得较小。反之，当其值为正值时，元素在Z轴越移越近，导致元素变得较大。
• translate3d(tx, ty, tz) ：使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少

上面两个方法的tz参数表示元素沿Z轴位移的长度，不能用百分比值，因为元素在Z轴上没有尺寸

.translate3d-1 .pic:nth-child(2):hover {
    transform: translate3d(30px, 30px, 200px);
}
.translate3d-2 .pic:nth-child(2):hover {
    transform: translate3d(30px, 30px, -200px);
}

参照上面两个使用 translate3d 转换函数的示例效果，第一个例子在Z轴移动200px，由于正值会向上移动，导致该元素放大；第二个例子在Z轴上移动-200px，导致第二个图片元素向下移动到第一个图片后面，并缩小。

translateZ(tz) 函数相当于 translate(0,0,tz) 的效果，表示仅在Z轴上移动，在视觉上仅是放大缩小，放大时完全遮盖第一个元素，缩小时完全被第一个元素遮盖，可在别处测试，采用第一个元素半透明来查看效果。

另外，仅从视觉效果上看，translateZ() 和 translate3d(0,0,tz) 函数功能非常类似于二维空间的 scale() 缩放函数，但实际上完全不同，它们的变形是发生在Z轴上，而不是X轴和Y轴。

CSS3 3D 旋转

在 3D Transform 中，我们可以让元素沿任何一个轴旋转，CSS3 中新增的旋转函数有 rotateX(a) 、rotateY(a) 、rotateZ(a) 和 rotate3d(x,y,z,a) 四个。

rotateX() 和 rotateY() 函数分别指定一个元素围绕X轴和Y轴旋转，旋转的量是一个角度值；如果值为正值，元素顺时针旋转；反之，如果值为负值，元素逆时针旋转。

rotateZ() 函数与 rotateX() 和 rotateY() 函数功能是一样的；不同的是它指定元素围绕Z轴旋转，如果仅从视觉角度上看，rotateZ() 函数让元素顺时针或逆时针旋转，并且效果和 rotate() 效果等同，但他不是在2D平面的旋转。

rotate3d(x,y,z,a) 与其它三个函数有一定的不同，参数中的x/y/z是一个0-1之间的数字，分别用来描述围绕X/Y/Z轴旋转的矢量值，参数a与其它三个函数中的角度一样，用来指定元素在3D空间旋转的角度，正值顺时针旋转，负值逆时针旋转。

• rotateX(a) 函数功能等同于 rotate3d(1,0,0,a)
• rotateY(a) 函数功能等同于 rotate3d(0,1,0,a)
• rotateZ(a) 函数功能等同于 rotate3d(0,0,1,a)

.rotate3d-1 .pic:nth-child(2):hover {
    transform: rotateX(50deg);
}
.rotate3d-2 .pic:hover {
    opacity: 1;
    transform: rotateX(45deg);
}
.rotate3d-3 .pic:nth-child(2):hover {
    transform: rotateY(45deg);
}
.rotate3d-4 .pic:nth-child(2):hover {
    transform: rotateZ(35deg);
}
.rotate3d-5 .pic:nth-child(2):hover {
    transform: rotate3d(.6, 1, .6, 45deg);
}
.rotate3d-6 .pic:hover {
    opacity: 1;
    transform: rotate3d(.6, 1, .6, 45deg);
}

上面的示例可以很好的演示3D旋转效果，前两个例子是沿X轴旋转，第三、四个例子分别沿Y轴、Z轴旋转，最后两个使用了 rotate3d() 函数；其中，第二个和第六个例子只保留了一个DIV，为了不使半透明的DIV影响效果，其它效果可联想一下。

CSS3 3D 缩放

CSS3 3D变形中的缩放主要有 scaleZ(s) 和 scale3d(sx, sy, sz) 两个函数，当 scale3d(sx, sy, sz)中X轴和Y轴参数同时为1（即 scale3d(1, 1, sz)），其效果等同于 scaleZ(sz)。

scaleZ(s) 和 scale3d(sx, sy, sz) 函数的参数是一个缩放比例，不能为负值，当其值大于1时，元素放大，小于1时则缩小；这两个函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。

下面两个示例都在X轴上旋转45度，然后在Z轴上缩放：

.scale3d-1 .pic:hover {
    transform: scaleZ(15) rotateX(45deg);
}
.scale3d-2 .pic:hover {
    transform: rotateX(45deg) scale3d(1, 1, .25);
}

CSS3 3D 倾斜和矩阵

CSS3中的3D矩阵要比2D中的矩阵复杂的多了，先不去研究。

倾斜是二维变形，不能在三维空间变形。元素可能会在X轴和Y轴倾斜，然后转化为三维，但它们不能在Z轴倾斜。