1.了解平面转换和空间转换

平面转换即2D转换，只有两个轴方向转换，改变盒子在平面内的形态（位移、旋转、缩放）

正负移动方向

空间转换即3D转换，也有位移，旋转，缩放，有三个轴

用到的属性transform

1.1 位移 translate

translate有三个属性值即x轴translateX()，y轴translateY()和z轴translateZ()，

写法：transform: translateX(100%)

括号内的取值：像素单位数值、百分比，百分比是代表盒子自身尺寸的百分比，可正可负

简写方式：transform: translate3d(100%, 100%, 10%)，括号内依次默认是x,y,z轴的移动距离

示例：盒子居中

样式：

1.2 旋转 rotate

三个属性：rotateX()、rotateY()、rotateZ()

写法：transform: roate(角度) 角度单位：deg，默认以自己的中心为圆心

解读：rotateZ(30deg) 沿Z轴顺时针旋转30度，也就是我们看到的屏幕的面，跟直接写rotate()效果一样，负值就是逆时针

rotate3d()一般不用，用来设置自定义旋转轴的位置及旋转的角度，x,y,z取值为0-1之间的数字

1.2.1 转换原点

transform-origin:原点水平位置，原点垂直位置

取值：方位名词（left、top、right、bottom、center）,像素单位数值，百分比

1.2.2 复合属性

transform: translate() roate() 当两种情况组合在一起时，位移必须在前

1.3 缩放 scale

语法： transform:scaleX(缩放倍数)/scaleY(缩放倍数)/scaleZ(缩放倍数)

简写：transform:scale3d(x,y,z)

transform:scale(缩放倍数) 表示x轴，y轴等比例缩放

2.透视

用法：给父级添加perspective属性（一般结合空间转换使用）

取值：像素单位数值，数值一般在800 - 1200

视距，也叫透视距离，是指人的眼睛到屏幕的距离（近大远小），负值的时候变远了

视图前为正视距，后为负视距

2.1 立方体呈现

使用 transform-style:preserve-3d 添加给父级

默认值flat,表示子元素处于2d平面内，添加后使子元素处于真正的3d空间

案例：正方体

样式

.box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 1000;  /*透视 */
            transform-style: preserve-3d; /*开启3d*/
            transition: all 1s;
        }
        .box div {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .one {
            background-color: aqua;
            transform: translateZ(100px);
        }
        .two {
            background-color: blueviolet;
            transform: translateX(100px) rotateY(90deg);
        }
        .three {
            background-color: palevioletred;
            transform: translate(-100px) rotateY(-90deg);
        }
        .four {
            background-color: plum;
        }
        .box:hover {
            transform: rotateY(360deg);
        }

结构

    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </div>

css3属性-transform详解