技術標籤：html+csscss3htmlhtml5

製作立方體構思

1：首先要知道3d,x軸，y軸，z軸的方向
如圖所示：

2:要想做一個立方體首先是做6個面

（以中間為基準）中間向前面平移150px（transform: translateZ(150px)），後面也平移150px,
然後旋轉 rotateY(180deg)，這樣前後面就做完了。

左：以中間為準逆時針針旋轉90度（rotateY(-90deg)）
右：以中間為準順時針針旋轉90度（rotateY(90deg)）
左右都平移150px translateZ(150px)
上下道理都一樣

<div id="warp">

            <div class="sp front"></div>
            <div class="sp back"></div>
            <div class="sp left" ></div>
            <div class="sp right"></div>
            <div class="sp top"></div>
            <div class="sp bottm1"></div>

</div>
 

*{
                margin: 0;
                padding: 0;
                box-sizing: border-box;

            }
            html,body{
                height: 100vh;
                width: 100%;
                align-items: center;
                display: -webkit-flex;
                justify-content: center;
                background: radial-gradient(#ccc,rgb(5,1,36));
            }
        #warp{
            width: 300px;
            height: 300px;
            transform: rotateZ(20deg) rotateY(-20deg);
            position: relative;
            transform-style: preserve-3d;
            animation: b 3s linear alternate infinite;

        }

        #warp .sp{
            width: 100%;
            height: 100%;
            background: red;
            position: absolute;
            opacity: 0.1;
        }
        #warp .front{
            transform: translateZ(150px);
        }
        #warp .back{
            transform: rotateY(180deg) translateZ(150px);
        }
        #warp .left{
            transform: rotateY(-90deg) translateZ(150px);
        }
        #warp .right{
            transform: rotateY(90deg) translateZ(150px);
        }
        #warp .top{
            transform: rotateY(90deg) translateZ(150px);
        }
        #warp .bottm1{
            transform: rotateY(-90deg) translateZ(150px);
        }
        @keyframes b {
          25%{
              transform: rotateX(180deg);

          }
            50%{
                transform: rotateY(180deg);
            }
            75%{
                transform: rotateY(90deg);
            }

        }

 

最後還不明白的話看這個視訊b站