CSS3 3D效果

这里单独写一篇关于CSS3 3D动画的博文，和大家分享我对3D动画的认识

笛卡尔坐标系统

在说3D变换之前必须了解的一个坐标系统，浏览器对元素进行3D定位、渲染就是遵循这个笛卡尔坐标系统。

2D笛卡尔坐标系统

2D转换是沿着两个坐标轴定义，如下所示

值的注意的是，y轴是向下延伸，这是由于系统采用的是二维笛卡尔坐标系统。

坐标系统的X轴会沿着所要转换的元素节点向水平维度延伸，y轴则沿着垂直维度延伸。

此坐标系统的原点（图标中的“（0,0）”）默认位于所要转换的元素的中心。可通过transform-origin属性改变。

而本文重点介绍的3D transform在2D的基础上增加多一个维度。

3D笛卡尔坐标系统

坐标系统的Z轴同时与x和y轴垂直。

此坐标系统的原点（图表中的“（0,0,0）”）也默认位于所要转换的元素的中心。同样可通过transform-origin属性改变。

3D转换从IE10开始得到支持。

要实现3D效果，要使用如下css属性：

1.perspective

perspective是指景深，定一个长度值，这个值代表从这个透视长度检视物件的所有子元素。通俗点讲就是：我们离元素多远来观察这个3D视图，如下图所示：

一般而言，该声明应用在3D变换的兄弟元素们的父元素上。

2.perspective-origin(x,y)

perspective-origin是指景深基点，主要用来决定perspective属性的源点角度。perspective-origin属性必须定义在父元素上。通常perspective-orgin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外位置。默认点是元素的中心点。其中X和Y的值可以是百分值、em、px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom这个看上去有点像我们background-position一样；下面给出一张图片方便大家理解：

上图中红点就相当于观察者的眼睛，我们在红点处观察3D元素，下面列出相应的写法：

top left、left top 等价于0 0、0% 0%

top、top center、center top 等价于50% 0

right top、top right 等价于100% 0

left、left center、center left 等价于0 50%、0% 50%

center、center center 等价于50% 50%（默认值）

right、right center、center right等价于100% 50%

bottom left、left bottom 等价于0 100%、0% 100%

bottom、bottom center、center bottom等价于50% 100%

bottom right、right bottom 等价于100% 100%

其中left,center,right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%;而top,center,bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变。

3.transform-style

transform-style 用于规定如何在3D空间中呈现被嵌套的元素，通俗来讲就是建立3D空间。一般而言，该声明应用在3D变换的兄弟元素们的父元素上。

transform-style:flat|preserve-3d;

flat:子元素将不保留其3D位置。（默认值）

preserve-3d:子元素将保留其3D位置。

4.transform

相对于2D变换，3D变换在原有的transform属性中添加了一下属性：

4.1 3D位移-translate3d(tx,ty,tz)

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。其中

tx:代表x坐标位移向量的长度

ty:代表y坐标位移向量的长度

tz:代表z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

衍生3个属性分别为：

translateX(tx):x轴位移向量的长度，相当于translate3d(tx,0,0)

translateY(ty):y轴位移向量的长度，相当于translate3d(0,ty,0)

translateZ(tz):z轴位移向量的长度，相当于translate3d(0,0,tz)

示例如下

4.2 3D旋转-rotate3d(x,y,z,angle)

rotate3d代表在3D空间，元素沿着经过原点（0,0,0）和三维坐标（x,y,z）2点的直线进行旋转。其中：

x:是一个0到1之间的数值，主要用来描述元素围绕X轴旋转的矢量值

y:是一个0到1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值

z:是一个0到1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值

angle:是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

衍生3个属性分别为：

rotateX(angle):指定沿着X轴根据指定角度的顺时针方向旋转。相当于rotate(1,0,0,angle);

rotateY(angle):指定沿着Y轴根据指定角度的顺时针方向旋转。相当于rotate(0,1,0,angle);

rotateZ(angle):指定沿着Z轴根据指定角度的顺时针方向旋转。相当于rotate(0,0,1,angle);

示例如下：

4.3 3D缩放-scale3d(sx,sy,sz)

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

其取值说明如下：

sx:横向缩放比例

sy:纵向缩放比例

sz:z轴缩放比例

衍生3个属性分别为：

scaleX(sx):指定元素每个点在X轴的比例。相当于scale3d(sx,1,1);

scaleY(sy):指定元素每个点在Y轴的比例。相当于scale3d(1,sy,1);

scaleZ(sz):指定元素每个点在Z轴的比例。相当于scale3d(1,1,sz);

示例如下：

应用

下面我们绘制一个正方体

css代码如下

html代码

显示效果如下：

注意：transform属性中rotate和translate的顺序是很重要的，比如.top中我们先沿X轴旋转90度，此时该div的Z轴已经不是垂直屏幕指向读者，而是竖直向上了。大家可能需要一些时间研究这些代码，要从立体的角度想象rotate之后Z轴的指向。每一个面开始时都按自己的中心点旋转，旋转之后X、Y、Z轴的指向也发生了变化。