CSS3+HTML5基础学习03（3D 转换）

1、3D转换
transform：translateZ(10px)，注意Z轴单位都是跟px
语法：transform: translateX(100px) translateY(100px) translateZ(100px);

1.1、3D移动简写的方法：
transform: translate3d(100px, 100px, 100px);

1.2、 transform: translate3d(100px, 100px, 100px);
注意，里面的x y z是不能省略的，如果没有就写0，但是千万不要省略、

2、3D转换之透视：perspective
透视的单位是像素（px)，如果想要元素有3D效果，必须要有透视
perspective数字越小，看到的图片就越大，数字越大，看到的图片就越小

注意：透视是写在被观察元素的父盒子上
透视就是一个距离人的眼睛到屏幕的距离；
如果Z轴（正值）越大，我们看到的物体也就越大

3、3D旋转：rotate3d
对于元素向X轴旋转的方向的判断有一个左手准则，
左手准则：左手的拇指指向X轴的正方向，
其余手指的弯曲方向就是该元素沿着X轴旋转的正方向

对于元素像Y轴旋转的方向判断，也有一个左手准则；
左手准则：左手的大手拇指向下，指向Y轴
其余手指弯曲的方向就是该元素沿着y轴旋转的正方向

4、3D呈现：transform-style
(1)transform-style是控制子元素是否开启三位立体环境
(2)transform-style：flat 子元素不开启3d立体空间，默认是这个
(3)transform-style：perserve-3d，子元素开启立体空间
(4)代码写给父级，但是影响的是子盒子
（5）这个属性很重要，后面必用

5、浏览器的私有前缀
浏览器的私有前缀是为了适应这些浏览器的老版本

5.1、浏览器的私有前缀：
-moz-：代表火狐（firefox）浏览器私有属性
-ms-：代表IE
-webkit-：代表Safari和谷歌（Chrome）
-o-：代表Opera
例如圆角的写法：
-moz-border-radius：10px;
-ms-border-radius：10px;
-webkit-border-radius：10px;
-o-border-radius：10px;
先把私有前缀的写完后再写一个总的圆角
border-radius：10px;