CSS3 3D转换,私有前缀

1. 3D转换

1.1.三维坐标系

• X轴：水平向右
• Y轴：垂直向下
• Z轴：垂直屏幕
  注意：
  X右边是正值，左边是负值
  Y下面是正值，上面是负值
  Z外面是正值，里面是负值

1.2. 3D移动translate3d

• transform:translateX(100px)：仅仅在X轴移动
• transform:translateY(100px)：仅仅在Y轴移动
• transform:translateZ(100px)：仅仅在Z轴移动（一般以px为单位）
• transform:translate3d(x,y,z)

1.3.透视

透视写在被观察元素的父盒子上面
perspective:…px

1.4. 3D旋转 rotate3d

• transform:rotateX(45deg) 沿x正方向旋转45度
• transform:rotateY(45deg) 沿Y正方向旋转45度
• transform:rotateZ(45deg) 沿Z正方向旋转45度
• transform：rotate3d(x,y,z,deg)

1.5. 3D呈现 tansform-style

• 控制子元素是否开启三维立体环境
• transform-style:flat 子元素不开启3d立体空间，默认的
• transform:style:perserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子
• 属性很重要

2.浏览器私有前缀

为了兼容老版本的写法

2.1.私有前缀

-moz- ：代表firefox浏览器私有属性
-ms-：IE私有
-webkit-：safari，chrome
-o-：opera

2.2.提倡写法

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