H5+C3+day3

H5+C3+day3

3D透视（视距）（3D化必写）perspective

假设一个眼睛离屏幕的距离，视距越小距离越近。单位px。

改变Z轴大小可以见效果

3D旋转

transform：rotatex（deg)

以X轴为中心点旋转，正正负逆

左右为X轴

transform：rotateY （deg）

以Y轴为中心点旋转，正正负逆

上下为Y轴

transform： rotateZ (deg)

与平面旋转一致

transform：rotate3D（ x, y, z, deg)

​ (1, 1, 1, 45deg )

设置旋转度数以1来调用。

3D移动

transform：translateZ（px）

朝着屏幕外（自己）移动为Z轴。

通过视距可以看见效果。

其他X,Y轴跟3D移动一致

transform：translate3D （ X, Y, Z)

3D移动的综合写法

3D呈现

transform-style : flat 平面效果（默认）

​ ：preserve-3D （3D模式）

写在父元素身上

总结

1.百分比单位相当于自身

2.视距，视距原点，装换样式都是给父元素添加的；

兼容性

1.2. css3兼容处理

css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做以下处理

添加对应的浏览器的前缀 常见前缀如下

• 谷歌 -webkit
• 火狐 -moz
• IE -ms

如对 border-radius 进行兼容性处理

      -webkit-border-radius: 30px 10px;
      -moz-border-radius: 30px 10px;
      -ms-border-radius: 30px 10px;
	  // border-radius 一定要放在最后
      border-radius: 30px 10px;

果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性