H5和CSS3里面3D动画的运用

那时的H5啊愈来愈强悍 , 2D早已满足用户没法互联网的市场需求 ,愈来愈多的中文网站为的是享用听觉新体验都早已开始采用3D效用来做页面了

因此CSS3给他们提供更多了什么样3D的特性效用呢 ?像相片上的效用假如是不是来同时实现呢?下面让他们来介绍呵呵:

3D切换（转换）

3D切换是发生改变条码在3极坐标上的边线和花纹的一类控制技术 ,它的特征是近大远小 , 球体前面遮盖不由此可见 ,因此当他们在页面上构筑3D效用的这时候参照那些特征就能工业生产3D效果。

(1)3维极坐标

反之亦然的假如他们想作出3D效用 ,因此他们就要晓得3维极坐标 ,和2维极坐标相同的是再加了Z轴

3维极坐标只不过即是三维内部空间，三维内部空间是由3个轴协力共同组成的:x轴 水准向右 , y轴 横向向上 ,z轴 横向萤幕 由萤幕里头对准萤幕的外边

注意： x 右边是正值，左边是负值 y轴：横向向上 注意： y 上面是正值，上面是负值 z轴：横向萤幕 注意： 往外边是正值，往里头是负值

(2)3d移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。昨天我早已说过了2D移动他们的用法基本相同 , 今天就不再说了

例如:transform:translate3d(x,y,z) 其中 x y z分别指要移动的轴的方向的距离

但是要注意:因为z轴是横向萤幕，由里对准外边，因此 默认是看不到元素在z轴的方向上移动，想看到，可以采用上面的 视距 特性设置

那他们就要开启透视了(perspective)通过发生改变z轴的值 ,让他们的眼睛来看出相同的听觉效用

(3)视距 perspertive(透视)

在2D平面产生近大远小听觉三维，但是效用是二维的 ,假如想要在页面产生3D效用需要透视（理解成3D球体投影在2D平面内）。

模拟人类的听觉边线，可认为安排一只眼睛去看 ,透视他们也称为视距：视距就是人的眼睛到萤幕的距离 ,距离听觉点越近的在电脑平面成像越大，越远成像越小

通过发生改变z轴的值 ,让他们的眼睛来看出相同的听觉效用

如 他们想看到 球体 在z轴上的移动 的 远大近小效用时

设置球体的translateZ一般大于 0 如 transform:translateZ(100px)设置 人和球体的距离 – 视距 这个值规定要设置给球体的父元素perspertive:1000px动态发生改变球体的translateZ即可观察效用

他们可以看出明明是两个一模一样大小的盒子 , 由于盒子1向z轴移动-150像素并且他们给盒子1的父盒子加了透视(perspertive)然后他们眼睛看上去盒子1就变小了 ,那假如他们不加透视呢?

因此perspective(透视)的作用就是让他们能够看到近大远小的效用

4.3D旋转 rotate3d

3d旋转指可以让元素在3维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转 对于元素旋转的方向的判断

晓得旋转方向才能清楚的布局出想的盒子,上面他们看看相同轴应的旋转方式:

transform:rotateX(45deg)：沿着x轴正方向旋转 45度

transform:rotateY(180deg) ：沿着y轴正方向旋转 180deg

transform:rotateZ(90deg) ：沿着Z轴正方向旋转 90deg

transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度 ,

xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

根据左手法则 ,大拇指对准的方向就是轴的正负方向 ,其他手指握弯曲方向就是该元素沿着轴旋转的方向了

5.3D呈现 transfrom-style

transfrom-style的作用是控制子元素是否开启三维三维环境。

transform-style: flat 子元素不开启3d三维内部空间 默认的

transform-style: preserve-3d; 子元素开启三维内部空间

代码写给父级，但是影响的是子盒子

他们来准备三个盒子:

先不加transform-style: preserve-3d看看效用

今天的3D常用效用动画电影就那些了 ,希望大家多多关注 ,每天都有中文网站制作小技巧分享.最后制作一个旋转木马: