3D移动 translate3d
transform:translate3d(x,y,z) ,translform:translateZ(100px) 仅仅是移动在Z轴上移动.往外正值,往里负值。
视距 perspective:近大远小,物体在z轴上移动,离眼睛越近看上去越大。这个值规定要设置给物体的父元素。
3D旋转 rotate3d
transform:rotateX(45deg):沿着x轴正方向旋转 45度
左手准则:
1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了
3D呈现 transform-style
控制子元素是否开启三维立体环境
- transform-style: flat 子元素不开启3d立体空间 默认的 (flat:平的,平面)
- transform-style: preserve-3d; 子元素开启立体空间 (preserve:[prɪˈzɜ:v] 保持)
- 代码写给父级,但是影响的是子盒子
私有前缀
-moz-:代表 firefox 浏览器私有属性 (moz:Mozilla,firefox由Mozilla打造)
-ms-:代表 ie 浏览器私有属性 (ms:Microsoft)
-webkit-:代表 safari、chrome 私有属性 (这俩浏览器的内核为webkit)
-o-:代表 Opera 私有属性 (o:opear缩写)
|
|