CSS3-新增内容总结、3D转换、浏览器私有前缀

6. 3D转换

6.1 三维坐标系

三维坐标系指立体空间，是由3个轴共同组成的。

• x轴：水平向右 注：x右边是正值，左边是负值
• y轴：水平向下 注：y下面是正值，上面是负值
• z轴：垂直屏幕 注：往外是正值，往里是负值

6.2 3D位移 translate3D

语法：
transform: translateX() translateY() translateZ()

属性	描述
translateX	沿着X轴移动
translateY	沿着Y轴移动
translateZ	沿着Z轴移动，单位px

简写：

transform: translate3d(X,Y,Z);

注：

• xyz是不能省略的，如果没有就写0

6.3 透视 perspective（重要）

• 如果想要在网页上产生3D立体效果，就需要透视
• 透视称为视距，就是人的眼睛到屏幕的距离
• 透视的单位是像素

注意：透视就写在被观察元素的父盒子上面

6.4 3D旋转 rotate3d

可以让元素在三维平面内沿着x\y\z轴或者自定义轴进行旋转。

语法：

属性	描述
transform:rotateX(45deg)	沿着X轴正方向旋转45度
transform:rotateY(45deg)	沿着Y轴正方向旋转45度
transform:rotateZ(45deg)	沿着Z轴正方向旋转45度
transform:rotate3d(x,y,z,deg)	沿着自定义轴旋转deg为角度，（了解即可）

6.5 3d呈现 transform-style（重要）

• 控制子元素是否开启三维立体环境
• transform-style：flat;子元素不开启3d立体环境，默认。
• transform-style：preserve-3d; 子盒子立即开启立体空间
• 写给父级，但是影响的是子盒子

6.6 注意事项

视距和3D呈现，不能同时在一个父盒子上。

3D呈现 transform-style在父级上，

视距 perspective呈现在父级的父级上。

• backface-visibility:hidden; 意为元素在背面时，面向用户是否可见

7. 浏览器私有前缀

由于有些浏览器兼容老版的写法，比较新版本的浏览器无需添加。

1. 私有前缀

前缀	描述
-moz-	代表Firefox的私有前缀
-ms-	代表IE浏览器的私有前缀
-webkit-	代表safari、chrome私有属性
-o-	代表Opera私有属性

2. 提倡写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

总结