制作旋转金字塔

制作旋转金字塔动画，使用css动画制作，成果如下，
下面上代码
创建好金字塔所需要的的层，一共四个面

<div class="triangle">
        <div class="box">
            <div  class="surface1">


            </div>
            <div class="surface2">

            </div>
            <div class="surface3">

            </div>
            <div  class="surf``ace4">

            </div>
        </div>
    </div>

给金字塔安置好位置以及整个金字塔大小（这个不重要）

.triangle {
    width: 20%;
    height: 50%;
    position: absolute;
    left: 30%;
    top: 30%;
}

给金字塔每一面设置大小

 .box div {
            width: 100%;
            height: 80%;
            position: absolute;
        }

再给每一面设置背景图片。图片以及样式如下

.box div {
    width: 100%;
    height: 80%;~~~~
    position: absolute;
    background: url('image/triangle.png') no-repeat;
    background-size: 100% 100%;
}

现在展示的效果如下

然后给盒子增加3D旋转动画

.box {
            /*设置3D效果*/
            transform-style: preserve-3d;
            /*盒子的大小*/
            width: 100%;
            height: 100%;
            margin: 0px auto;
          
            animation: rotate 5s ease;
            /*无限执行*/
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
    
/*添加3D旋转效果 Y轴旋转*/        
    @keyframes rotate {
        from {
            transform: rotateX(-20deg) rotateY(0deg);
        }
        to {
            transform: rotateX(-20deg) rotateY(360deg);
        }
    }

现在达到的效果如下

最后一步，调整每一面的角度，就完成了

 /* 调整位置，制作成一个金字塔*/
        
        .box .surface1 {
            transform: rotateX(31deg) translateZ(90px);
        }
        
        .box .surface2 {
            transform: rotateX(-31deg) translateZ(-90px) rotateY(180deg);
        }
        
        .box .surface3 {
            transform: rotateZ(31deg) rotateY(-90deg) translateZ(90px);
        }
        
        .box .surface4 {
            transform: rotateZ(-31deg) rotateY(90deg) translateZ(90px);
        }

`