transform:
rotateX():正值向上翻转
rotateY(): 正值向右翻转
translateZ() : 正值向前,负值向后(向摄像机前移动,可勉强认为是放大缩小)
scaleZ() : 立体元素的厚度
3d写法
scale3d() : 三个值x y z
translate3d():三个值
rotate3d(): 四个值0|1 (x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg 如transform:rotate(0,0,1,30deg);指沿着z轴旋转30°
3d相关属性
perspective:(景深)离屏幕多远的距离去观察元素,值越大幅度越小(相当于架设一台照相机),值为像素px
perspective-origin:景深-基点位置,观察元素的角度
transform-origin:X Y Z 旋转基点
transform-style: 3D空间,值有flat(默认值2d)、preserve-3d(3d,产生一个三维立体的空间)
backface-visibility:背景隐藏
hidden、visible(默认值)
要设置立体的3d效果,必须要有景深perspective(即观察距离,一般在最大的父容器中设置),3D空间transform-style:perserve-3d;