css3 实现正方体 3d环境

css3 正方体：

方法

（布局）：正方体 有六个面 初始情况下这6个面都在同一位置；
步骤1：设置3d环境
步骤2 使其每个面都 旋转点都是 center center 中心位置 旋转相应角度
再向 相应的x/y/z 平移对应的距离
注意：正方体上下的两个面不需要旋转 只需要在z轴上 前后平移即可

示意图：

知识要点：

Stransform:translate 位移
Stransform:orign 旋转基点
transform-style: preserve-3d; 设置3d环境
perspective: ;设置景深

代码：

**css样式**

 
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            transform-style: preserve-3d;
            perspective: 800px;
        }
        
        .box {
            width: 300px;
            height: 300px;
            /* background: rgba(0, 0, 0, 0.5); */
            position: relative;
            margin: auto;
            margin-top: 20px;
            transform-style: preserve-3d; /* 设置3d环境 */
        }
        
        div {
            width: 200px;
            height: 200px;
            position: absolute;
            /* background: rgba(200, 0, 0, 0.5); */
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            text-align: center;
            line-height: 200px;
        }
        
        .box1 {
            transform: translateX(100px) rotateY(90deg);
            background: rgba(0, 255, 60, 0.5);
            /* 背景颜色旋转rgba  设置成半透明状态 方便查看效果*/
        }
        
        .box2 {
            transform: translateX(-100px) rotateY(90deg);
            background: rgba(204, 38, 212, 0.5);
        }
        
        .box3 {
            transform: translateZ(-100px) rotateY(180deg);
            background: rgba(0, 4, 255, 0.5);
        }
        
        .box4 {
            transform: translateY(100px) rotateX(90deg);
            background: rgba(255, 123, 0, 0.5);
        }
        
        .box5 {
            transform: translateY(-100px) rotateX(90deg);
            background: rgba(25, 0, 221, 0.5);
        }
        
        .box6 {
            transform: translateZ(100px);
            background: rgba(255, 0, 119, 0.5);
        }
  

布局：

        <!-- 
    布局 ：先设定好正方体的来个面 6个box 
            让六个box 在同一位置 就需要给他们都加上定位
            在3d环境下 每个面按照各 各个特定的旋转基地 开始旋转 相应的度数 之后在平移（x ）/（ y）/（z） 距离 -->

    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
    </div>
        
    </div>