2D和3D

2D

.box {
            width: 200px;
            height: 200px;
            background-color: red;
            /* transform: translate(50px,50px) rotate(45deg) scale(1,2) skew(20deg); */
            /* skew（）拉伸效果；拉伸后 形状变 宽度和高度的【大小不变】 宽高【角度变化】 */
            /* 
               translate(x,y)平移
               rotate（）2d旋转
               scale（x，y）当前元素放大或者缩小
               skew（）拉伸 形状不变  宽高不变 角度变化
            */
            transform: matrix(0.5, 0.86, 0.5, -0.5, 0, 0);
            /* transform: matrix3d(0.6,0.75,0.6,-0.5,0,0); */
        }

<div class="box"></div>

3D

3d旋转：元素绕轴旋转后；x y z 轴也旋转
注意：无论元素怎么转动
y轴始终都在 高度上
x轴始终都在 宽度上
z轴始终都在与x和y垂直（你看不见）

body {
            /* 透视：没有透视不能看到3d效果 */
            perspective: 1200px;
        }

        .box {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 300px;
            left: 300px;
            /* 透明度 */
            opacity: 0.5;
        }

.red {
            /* 前 */
            background-color: red;
            transform: translate3d(0px, 0px, 100px);
        }

        .rellow {
            /* 上 */
            background-color: yellow;
            transform: rotateX(90deg) translate3d(0px, 0px, 100px);
        }

        .blue {
            /* 左 */
            background-color: blue;
            transform: rotateY(90deg) translate3d(0px, 0px, 100px);
        }

        .pink {
            /* 下 */
            background-color: pink;
            transform: rotateX(-90deg) translate3d(0px, 0px, 100px);
        }

        .green {
            /* 右 */
            background-color: green;
            transform: rotateY(-90deg) translate3d(0, 0, -100px);
        }

        .orange {
            /* 后 */
            background-color: orange;
            transform: translate3d(0px, 0px, -100px);
        }

<div class="box red">000001</div>
        <div class="box rellow">000002</div>
        <div class="box blue">000003</div>
        <div class="box pink">000004</div>
        <div class="box green">000005</div>
        <div class="box orange">000006</div>