IT兄弟连 HTML5教程 CSS3属性特效 3D变换3

5  3D旋转

在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增了三个旋转函数：rotateX()、rotateY()和rotateZ()。使用rotateX()函数允许一个元素围绕X轴旋转；使用rotateY()函数允许一个元素围绕Y轴旋转；使用rotateZ()函数允许一个元素围绕Z轴旋转；

rotateX()函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。其基本语法如下：

 rotateX(a)

其中，a指的是一个旋转角度值，其值可以是正值也可以是负值。

rotateY()函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。其基本语法如下：

rotateY(a)

其中，a指的是一个旋转角度值，其值可以是正值也可以是负值。

rotateZ()函数和其它两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转。其基本语法如下：

rotateZ(a)

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

一起来看一个简单的实例，加深对rotate()函数的理解，代码如下：

这里我们让第一张图片绕X轴旋转30deg，第二张图片绕Y轴旋转30deg，第三张图片绕Z轴旋转30deg。在浏览器中查看，运行效果如图5所示：

图5  rotate() 3D旋转

6  3D缩放

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中的X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为1，当值大于1时，元素放大；反之小于1大于0.01时，元素缩小。其使用语法如下：

scale3d(sx,sy,sz)

scale属性取值及说明如表5:

表5 scale()属性值取值及说明

2D的缩放函数为scale(sx,sy)，能横向和纵向缩放元素。3D转化多了一个Z轴的缩放。用scaleZ()函数实现元素在Z轴的缩放，其使用的语法如下：

scaleZ(s)

s指定元素每个点在Z轴的比例。一起来看一个简单的实例，加深对scaleZ()函数的理解，代码如下：

这里我们让第一张图片绕Y轴旋转30deg，第二张图片绕Y轴旋转30deg并且放大三倍。在浏览器中查看，运行效果如图6所示：

图6  scaleZ() 3D缩放

7  3D盒子

这里使用3D转换的属性及方法构造出一个6面的3D盒子，该盒子是一个正方体。代码如下：

这样就构造出了一个3D盒子，正面是3。当鼠标移入到盒子时，让该盒子绕X轴旋转360deg，为了让读者清晰地看到盒子旋转的过程，我们为该盒子增加了过渡。下面是旋转过程的随机截图，如图7所示：

图7 3D盒子