3D效果

perspective

perspective: 1000px;
它要写在被观察的父盒子上。
用来模拟人类的视觉位置，也称视距，即人的眼睛到屏幕的距离。
它的单位是像素px。
它的值越大，表示视距越远，成像越小，反之。

transform-style

控制子元素是否开启3D空间效果。
transform-style: preserve-3d;
preserve-3d：子元素开启3D立体空间。
transform-style: flat;
flat：不开启3D空间，默认值，2D平面显示。
它要写在父盒子上。

rotate3d(x,y,z,angle)

旋转，xyz的值0或1；1表示要旋转true；0表示不旋转false。
rotate3d(1,1,1,angle)：rotateX(angle)rotateY(angle)rotateZ(angle)
rotate3d(1,0,1,angle)：rotateX(angle)rotateZ(angle)
rotate3d(0,0,1,angle)：rotateX(0)rotateZ(angle)

transform: translateZ(-100px);

沿着Z轴位移:值越大,离得越近,成像越大
transform: translateZ(-100px);