css 3D动画

什么是3d的场景呢？2d场景，在屏幕上水平和垂直交叉线x轴和y轴

3d场景，在垂直于排名的方向，相对于3d多出个z轴

Z轴靠近屏幕方向是正值，远离屏幕的方向是反向

css3中的3d变换主要包含以下几种功能函数：

3d位移：
css3中3d位移主要包含tanslateZ()和translate3d()两个函数；
​
3d旋转：
css3中的3d旋转主要包含rotateX(),rotateY(),rotateZ()和rotate3d()四个功能函数
​
3d缩放：
css3中的3d缩放主要包含scaleZ()和scale3d()两个功能函数；

1.3D平移

先在母元素构建一个3d舞台

transform-style:preserve-3d;
​
preserve-3d：3d舞台
flat：2d舞台，默认值

transform写法

transform:translateZ(100px);
transform:translate3d(0,0,200px);
​
transform:translateZ(100px);表示对象在z轴往正方向移动了100px
transform:translate3d(0,0,200px);表示对象在x轴移动了0，y轴移动0，z轴移动100px

景深-perspective（实现z轴移动的视觉效果）

               生活中的3d区别于2d的地方
近大远小 
程序中实现的办法 perspective 元素距离 视线的距离（物体和眼睛距离越小，近大远小的效果越明显）
perspective:1200px;(在父元素中使用)
transform：perspective(1200px)  (在子元素中使用)
两个都设置会发生冲突，建议值设置父元素，通常的数值为900-1200之间
如果当你的视线离物体足够远的时候，基本上就不会有近大远小的感觉
               perspective-origin:
观察3d元素的（位置）角度perspective-origin:center center;(中心)
                     perspective-origin:left top;(左上角)
                     perspective-origin:100% 100%;(右下角)

2.3D旋转

rotateX()方法，元素围绕其X轴给定的度数进行旋转
三维空间，按着x轴进行翻转
rotateY()方法，元素围绕其Y轴给定的度数进行旋转
三维空间，按着y轴进行翻转
​
rotateZ()其实和2d的旋转效果一样，绕着z轴旋转

语法：
transform:rotate3d(1,1,1,30deg);
代表，绕着x轴旋转1*30deg
     绕着y轴旋转1*30deg
     绕着z轴旋转1*30deg
****前面三个数取值0-1

3.3D缩放

css3 3d变形中只有有scaleZ()和scale3d()两种函数，当scale3d()中x轴和y轴同时为1，即scale3d(1,1,sz)。通过使用3d缩放函数，可以让元素在z轴上按比例缩放。默认值为1，当值大于1时，元素放大，反之小于1大于0.01时元素缩小

scale3d(sx,sy,sz)

sx:横向缩放比例
sy：纵向缩放比例
sz：z轴缩放比例

scaleZ(S)

S:指定元素每个点在z轴的比例
注：scaleZ()和scale3d()函数在单独使用的时候没有任何效果，
​
必须配合其他属性一起使用:
     transform-style:preserve-3d;
/*搭建3d舞台*/
     perspective:900px;
/*景深*/
     transform:rotate3d()
/*旋转*/
​
必须配合使用

复合写法

transform:scale3d(1,1,10) rotateX(45deg);
​
1:x轴放大1倍
1:y轴放大1倍
10：z轴上放大10倍数