CSS3 - 3D转换

3D移动

• translform:translateX(100px) : 在x轴上移动
• translform:translateY(100px) : 在y轴上移动
• translform:translateZ(100px) : 在z轴上移动
• 简写 : transform:translate3d(x,y,z)

透视 perspective

透视写在被观察元素的父盒子上面的

3D 旋转 rotate3d

语法 :

• transform:rotateX(45deg) : 沿着x轴正方向旋转45度
• transform:rotateY(45deg) : 沿着y轴正方向旋转45度
• transform:rotateZ(45deg) : 沿着z轴正方向旋转45度
• transform:rotate3d(x,y,z,deg) : 沿着自定义轴旋转deg角度

左手准则 :

• 左手的手拇指指向x轴的正方向
• 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

3D呈现 transfrom-style

• 控制子元素是否开启三维立体环境
• transform-style: flat 子元素不开启3d立体空间
• transform-style: preserve-3d; 子元素开启立体空间
• 代码写给父级, 影响的是子盒子