css3的3d属性集合

css3的3d属性集合
css3的3d属性集合
想进⼊css3的3d世界必须知道⼀下⼏个属性及其⽤法。

当然在进⼊属性介绍之前我想你必须知道3维坐标，附上⼀张经典图如下：
我想不⽤解释了吧。

之后要平移和旋转都是在这个基础之上的，认真看看吧骚年！！
perspective (英⽂解释：透镜，望远镜;观点，看法;远景，景⾊;洞察⼒)：在这⾥做透镜的意思。

persperctive:none/number;这是它的格式.在css默认是none。

啥意思呢？很简单，就是距离多远看某个元素。

none即没有距离，所以默认情况下是没有3d效果。

当这个number的值越⼤就是越远距离看元素!!聪明的⼈可能想到了下⾯⼀个问题，既然是看某个元素，那这个perspective属性是不是放在这某个值的⽗元素上呢？没错！！所以就引出⼀个问题，css的3d效果的html结构⼀般是怎么样的？如下：
1 <div class="container">
2 <div class="piece-box">
3 <div class="piece piece-1"></div>
4 <div class="piece piece-2"></div>
5 <div class="piece piece-3"></div>
6 <div class="piece piece-4"></div>
7 <div class="piece piece-5"></div>
8 <div class="piece piece-6"></div>
9 </div>
10 </div>
简单解释⼀下：container的div是⼀个⼤容器，persperctive的视⾓就是从该容器去看包含许多piece的piece-box容器！！给定⼀个值以后就会从多远的距离看这个piece-box容器！！
你以为这样就可以形成了3d效果了吗？no
transform-style
没错，它是css中3D的关键， transform-style 默认是 flat ，如果你要在元素上视线3D效果的话，就必须⽤上 transform-style: preserve-3d ,否则就只是平⾯的变换，⽽不是3D的变换。

即在刚才的piece-box上加上transform-style:preserve-3d;就会有3d效果了；
接下来介绍⼀个还与3d有关的属性：
perspective-origin
由上⾯我们了解了 perspective ，⽽加上了这个 origin 是什么，我们前⾯说的这个是眼睛离物体的距离，⽽这个就是眼睛的视线，我们的视点的不同位置就决定了我们看到的不同景象，默认是中⼼，为 perspectice-origin: 50% 50% ,第⼀个数值是3D 元素所基于的 X 轴，第⼆个定义在 y 轴上的位置
此时你做的每⼀个transform,translate,transiton,animation操作将都会是以3d效果出现。

然⽽问题⼜来了,transform,translate,transiton,animation操作⼜有哪些？如何使⽤？真是⼀个馒头引发的⾎案啊。