景深
当前视点的远近(眼睛到所看物体的距离),默认的景深是0
perspective:1000px;
2D变换
1.平移:translate(x,y)
translateX(),translateY()
值可以是具体的px单位值,也可以是百分比.
百分比是依据对应元素的宽高计算得来的
如果需要多个值参与的2D或者3D变换,要把多个值全部写在一个transform属性里.
如果写多个,后面的会覆盖前面的.
2.缩放:scale(x,y)
值我们一般给小数,
1缩放为原来的1倍,0.5缩放为原来的一半,2缩放为原来的2倍.
如果值为负,先按照对应的轴翻转,再缩放.
3.倾斜:skew()
skewX 按照x轴倾斜
skewY 按照y轴倾斜
值是角度 单位是deg
倾斜的坐标轴与我们认知的坐标轴正好相反,横的是y轴,竖的是x轴.
沿x轴给正值,逆时针旋转.
沿y轴给正值,顺时针旋转.
4.旋转:rotate(x,y)
rotateX:沿x轴旋转
rotateY:沿y轴旋转
值给对应的角度,单位deg
从x轴正方向向零点看,如果沿x轴旋转给正值,是顺时针,给负值是逆时针.
从y轴正方向向零点看,如果沿y轴旋转给正值,是顺时针,给负值是逆时针.
3D转换
如果想看元素展现的3D效果,需要激活当前界面的3D效果,
而且要加到对应元素的父级里。transform-style:preserve-3d;
3D多了一个z轴可以展示立体效果
translate平移
translateZ()
rotate旋转
rotateZ()
值为正,顺时针旋转,值为负,逆时针旋转