空间转换

空间位移

//在X轴方向上的位移
    transform: translateX(100px);
//在Y轴方向上的位移
    transform: translateY(100px);
//在Z轴方向上的位移
    transform: translateZ(100px);
//在X、Y、Z交接点方向上的位移
    transform: translate3d(100px, 100px, 100px);

透视效果（简称：透视、视距、景深）

//给父元素添加，实现远小近大的效果，
//类似人类在屏幕里面安装了一个眼睛，能模拟实现3d立体效果
//距离初始盒子的距离，一般设置值：600px-1200px。也可设置其他值，不推荐
    perspective:XXpx;

空间旋转

//旋转方向使用左手定则，大拇指指向正轴，其余手指指向方向为旋转的正方向。
//填写的值是XXdeg，deg代表读书
//沿着X轴旋转
    transform : rotateX(XXdeg)；
//沿着Y轴旋转
    transform : rotateY(XXdeg)；
//沿着Z轴旋转
    transform : rotateZ(XXdeg)；
//自定义旋转，XXpx
    transform : rotate(X,Y,Z,XXdeg)；

立体呈现

//给最大的父元素设置perspective,如果不设置整个看起来就像压扁的，没有那种远小近大的立体效果
    perspective:XXpx;

//给最近且要设置3D效果的父元素设置transform-style：preserve-3d；
//会使子元素与父元素之间呈现分离的立体效果，搭配上帝视觉（旋转）查看
    transform-style：preserve-3d；

//上帝视觉的使用，也就是旋转需要查看的盒子，从侧边看能有那种立体效果
    transform: rotateX()  rotateY();