细说css3的动画（6）3D绘图

在之前聊到transform的时候，就看到里面有一些3D函数，但是基于3D的特殊性，我会在下面单独介绍3D的用法和特性

 

这是在网上找的一个图，先初步认识一下3D的坐标系

x轴、y轴大家都知道：

x轴坐标值向右增加、向左减少；

y轴坐标值向下增加、向上减少；

z轴在2D平面上是看不到的，但如果把2D平面侧过来，就像上图所示，z轴坐标值向外增加、向内减少。

 

但构建3D模型的时候，很容易颠倒方向，特别是旋转并移动的时候，因为div的旋转(rotate)是伴随的坐标一同旋转的，所以旋转后如果有移动(translate)，一定要在旋转后建立新的坐标系后在计算如何移动，对于这部分的解释，下面也会有说明。

 

老规矩，一步一步来，首先先列举出3D相关的属性和函数：

 

属性：

transform-origin    允许你改变被转换元素的位置。 
transform-style    规定被嵌套元素如何在 3D 空间中显示。
perspective    规定 3D 元素的透视效果。
perspective-origin    规定 3D 元素的底部位置。

transform函数：

translate3d(x,y,z)    定义 3D 转换。    
translateX(x)    定义转换，只是用 X 轴的值。
translateY(y)    定义转换，只是用 Y 轴的值。
translateZ(z)    定义 3D 转换，只是用 Z 轴的值。
scale3d(x,y,z)    定义 3D 缩放转换。
scaleX(x)    通过设置 X 轴的值来定义缩放转换。
scaleY(y)    通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)    通过设置 Z 轴的值来定义 3D 缩放转换。
rotate3d(x,y,z,angle)    定义 3D 旋转。    
rotateX(angle)    定义沿着 X 轴的 3D 旋转。
rotateY(angle)    定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)    定义沿着 Z 轴的 3D 旋转。

 

---

 

1、transform-origin：锚点（什么是锚点？看下面的截图吧）

参数形式：

transform-origin:x y

transform-origin:x y z

(其中x、y、z可以是px值，也可以是%，也可以混用)

transform-origin:top

transform-origin:left

transform-origin:right

transform-origin:bottom

 

下面举两种例子

（1）transform-origin:50% 50%;

图形中心点为锚点

这个div的宽高为200px，所以transform-origin:100px 50%;或者transform-origin:100px 100px;也是上图的效果

 

（2）transform-origin:left;

以左边中心为锚点旋转，transform-origin:0 50%;也是一样的

源码如下：

 

2、transform-style：设置显示样式是3D还是2D，默认是2D

所以我们要在最外层的盒子里加上：transform-style:preserve-3d;

由于这个属性的兼容性不太好，所以支持-webkit-transform-style: preserve-3d;（至少google浏览器可以支持）

 

3、perspective：透视深度，可以理解为人眼里3D模型的距离

通常这个值一般要大于模型的长宽，最好大一些，如果太小回影响人眼对3D模型的感知，如果3D模型构建完了，这个值就可以随意调节了。

例如：perspective:1000px;

 

注意：transform-style和perspective是构建3D系统的最重要的属性，而且都是徐要加在外层盒子里的，如果没有可能就看不出3D效果了。

 

to be continue..........