平面转换和空间转换

平面转换

平面 ​ 二维页面，只有X和Y轴 ​ 坐标 ​ 向右 === X轴正方向 ​ 向下 === Y轴正方向

平移

transform:translate(X轴偏移量，Y轴偏移量) ​ 取值：可以正负 1.具体的像素单位； 2.百分比(参照盒子自身尺寸) ​ transform:translateX(); transform:translateY(); 如果translate(只有一个值) === translateX()

旋转

transform:rotate(角度deg) ​ 一定要添加deg,否则没有效果 ​ 取值： 1.正值：顺时针旋转； 2.负值：逆时针旋转； ​ 左手法则 ​ 用左手，大拇指垂直面对你，手指环绕方向就是正方向 ​ 只能围绕Z轴旋转 ​ 细节：先做其它的变换再进行旋转 ​ 旋转会改变当前元素的坐标轴的方向

缩放

transform:scale(倍数) ​ transform:scale(X倍数，Y倍数) ​ 取值： 1.大于1放大； 2.小于1缩小 ​ 注意点：行内元素所有的平面转换是没有效果的

空间转换

平移

transform:translateZ() ​ z轴是指垂直屏幕向外的轴 ​ 可以实现z轴方向的位置偏移 ​ transform:translate3d(x,y,z)

旋转

transform:rotateZ() ​ 平面旋转就是围绕Z轴旋转 ​ transform:rotateX() ​ transform:rotateY() ​ transform:rotate3d(x,y,z,deg) ​ x,y,z的作用是描述一个方向，一个向量

缩放

scale3d()

透视（视距）

perspective:400~1200 px ​ 就是指人眼观察物体的距离

3d呈现

transform-style:preserve-3d ​ 作用：默认情况下，子元素的3d效果并不会保留下来，如果需要保留，需要在父容器中设置这个样式

左手定则

大拇指沿着轴的正方向，手指环绕方向就是正值