棱锥

 <div class="box">
        <div class="pyramid py-1">
          <div class="pyramid__inner">
            <div class="bit bit-1"><span>1</span></div>
            <div class="bit bit-2"><span>2</span></div>
            <div class="bit bit-3"><span>3</span></div>
            <div class="bit bit-4"><span>4</span></div>
          </div>
        </div>
      </div>

 .box {
      position: relative;
      // width: 500px;
      // height: 500px;
      margin: 0 auto;
    }

    /* ------------ 0 ------------ */
    .pyramid {
      width: 200px;
      height: 200px;
      margin: 3em auto -2rem;
      position: absolute;
      left: 50%;
      -webkit-perspective-origin: center -75%;
      perspective-origin: center -75%;
    }

    .pyramid__inner {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform: translateZ(-150px) translateX(-70%) rotateY(360deg);
      transform: translateZ(-150px) translateX(-70%) rotateY(360deg);

      -webkit-animation: Anim 15s linear infinite;

      animation: Anim 15s linear infinite;
    }

    @-webkit-keyframes Anim {
      0% {
        -webkit-transform: translateZ(-150px) translateX(-75%) rotateY(0deg);
        transform: translateZ(-150px) translateX(-75%) rotateY(0deg);
      }

      50% {
        -webkit-transform: translateZ(-150px) translateX(75%) rotateY(180deg);
        transform: translateZ(-150px) translateX(75%) rotateY(180deg);
      }

      100% {
        -webkit-transform: translateZ(-150px) translateX(-75%) rotateY(360deg);
        transform: translateZ(-150px) translateX(-75%) rotateY(360deg);
      }
    }

    @keyframes Anim {
      0% {
        -webkit-transform: translateZ(-150px) translateX(-75%) rotateY(0deg);
        transform: translateZ(-150px) translateX(-75%) rotateY(0deg);
      }

      50% {
        -webkit-transform: translateZ(-150px) translateX(75%) rotateY(180deg);
        transform: translateZ(-150px) translateX(75%) rotateY(180deg);
      }

      100% {
        -webkit-transform: translateZ(-150px) translateX(-75%) rotateY(360deg);
        transform: translateZ(-150px) translateX(-75%) rotateY(360deg);
      }
    }

    .bit {
      position: absolute;
      height: 0;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      opacity: .92;
    }


    .py-1 {
      -webkit-transform: scale(.485);
      transform: scale(.485);
      -webkit-perspective: 5000px;
      perspective: 5000px;
      z-index: 3;

      top: 0;
    }

    /* ------------ 1 ------------ */
    .py-1 .bit {
      width: 0px;
    }

    .py-1 .bit-1 {
      border-bottom: 200px solid #3765F9;
    }

    .py-1 .bit-2,
    .py-1 .bit-3,
    .py-1 .bit-4 {
      border-bottom: 200px solid #3765F9;
    }

    .py-1 .bit-1 {
      -webkit-transform: rotateX(30deg) translateZ(57px);
      transform: rotateX(30deg) translateZ(57px);
    }

    .py-1 .bit-2 {
      -webkit-transform: rotateX(-30deg) translateZ(-57px);
      transform: rotateX(-30deg) translateZ(-57px);
    }

    .py-1 .bit-3 {
      -webkit-transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-57px);
      transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-57px);
    }

    .py-1 .bit-4 {
      -webkit-transform: rotateZ(30deg) rotateY(90deg) translateZ(-57px);
      transform: rotateZ(30deg) rotateY(90deg) translateZ(-57px);
    }

    /* Text style */
    span {
      display: block;
      width: 100%;
      text-align: center;
      color: #fff;
      font-weight: bold;
      font-family: sans-serif;
      font-size: 3rem;
      -webkit-transform: rotateY(180deg) translateY(100%);
      transform: rotateY(180deg) translateY(100%);
    }

    .bit-1 span {
      -webkit-transform: rotateY(0deg) translateY(100%);
      transform: rotateY(0deg) translateY(100%);
    }

    .py-1 span {
      line-height: 5rem;
      -webkit-transform: rotateY(180deg) translateY(100%) translateX(-2.5rem);
      transform: rotateY(180deg) translateY(100%) translateX(-2.5rem);
    }

    .py-1 .bit-1 span {
      -webkit-transform: rotateY(0deg) translateY(100%) translateX(-.5rem);
      transform: rotateY(0deg) translateY(100%) translateX(-.5rem);
    }