CSS3的3D转换

CSS3的3D设置
    2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
    3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
    Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

定义 3D 平移移动
    transform ：translate3d(10px,20px,30px)；
        transform ：translateX(200px)   translateY(200px)   translateZ(200px)；

定义 3D 旋转
    transform ：rotate3d(0,0,1,30deg)；
        transform ：rotateX(30deg)   rotateY(30deg)   rotateZ(30deg)；

定义 3D 缩放
    transform ：scale3d(2,3,4)；
        transform ：scaleX(2)   scaleY(3)  scaleZ(3)
            该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

注意点：倾斜没有Z轴的写法

定义 3D 转换，使用 16 个值的 4x4 矩阵
    transform ：matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)；

为 3D 转换元素定义透视视图
    transform ：perspective(200px)  

改变元素基点的位置transform-origin
    transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。