1,3D的特点:
近小远大
物体后面遮挡不可见
2,3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向
transform:translateX(100px):仅仅是在x轴上移动
transform:translateY(100px):仅仅是在Y轴上移动
transform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位),有了透视,就能看到translateZ引起的变化了
transform:translate3d(x,y,z)
3,透视 perspective
4,3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转
transform:rotateX(45deg):沿着x轴正方向旋转45度
transform:rotateY(45deg):沿着y轴正方向旋转45度
transform:rotateZ(45deg):沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转
x y z是表示旋转轴的矢量
transform:rotate3d(1,1,45deg) 沿着独角线旋转45deg
5,3D呈现 transform-style(重要)
控制子元素是否开启三维立体环境
transform-style:flat 默认的不开启
transform-style:preserve-3d 子元素开启立体空间
代码写给父级,但是影响的是子盒子