我正在参加 码上掘金体验活动，详情：show出你的创意代码块

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

前言

此次灵感来源于前面的旋转相册，既然多个正方形可以做成正方体，那么锥体也就是多个三角形合成的咯，只需要算好每个三角形所占的角度，再调整好位置就行，最后加上动画，一个炫酷的旋转陀螺就完成了。

码上掘金

效果如下，还挺漂亮的。

代码实现

HTML 代码

<div class="romb-container">
  <div class="romb-wrap">
    <div class="romb">
      <div class="romb-top">
        <div class="romb-top-face"></div>
        <div class="romb-top-face"></div>
        <div class="romb-top-face"></div>
        <div class="romb-top-face"></div>
        <div class="romb-top-face"></div>
        <div class="romb-top-face"></div>
      </div>

      <div class="romb-bottom">
        <div class="romb-bottom-face"></div>
        <div class="romb-bottom-face"></div>
        <div class="romb-bottom-face"></div>
        <div class="romb-bottom-face"></div>
        <div class="romb-bottom-face"></div>
        <div class="romb-bottom-face"></div>
      </div>
    </div>
  </div>
</div>

CSS 代码

        .romb-container {
            width: 600px;
            height: 350px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        .romb-wrap {
            font-size: 12px;
            display: inline-block;
            width: 68px;
            height: 182px;
        }

        .romb {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: spin .5s linear forwards infinite;
        }

        .romb-top,
        .romb-bottom {
            position: absolute;
            width: 100%;
            height: 50%;
            transform-style: preserve-3d;
        }

        .romb-bottom {
            top: 50%;
        }

        .romb-top-face,
        .romb-bottom-face {
            width: 0;
            height: 0;
            border-style: solid;
            border-color: transparent;
            position: absolute;
            backface-visibility: hidden;
        }

        .romb-top-face {
            border-width: 0 34px 95px;
            margin-top: 9px;
        }

        .romb-bottom-face {
            border-width: 95px 34px 0;
            margin-top: -9px;
        }

        .romb-top-face:nth-of-type(1) {
            border-bottom-color: deeppink;
            transform: rotateY(0deg) translateZ(30px) rotateX(40deg);
        }

        .romb-bottom-face:nth-of-type(1) {
            border-top-color: #28f156;
            transform: rotateY(0deg) translateZ(30px) rotateX(-40deg);
        }

        .romb-top-face:nth-of-type(2) {
            border-bottom-color: #28f156;
            transform: rotateY(60deg) translateZ(30px) rotateX(40deg);
        }

        .romb-bottom-face:nth-of-type(2) {
            border-top-color: deeppink;
            transform: rotateY(60deg) translateZ(30px) rotateX(-40deg);
        }

        .romb-top-face:nth-of-type(3) {
            border-bottom-color: deeppink;
            transform: rotateY(120deg) translateZ(30px) rotateX(40deg);
        }

        .romb-bottom-face:nth-of-type(3) {
            border-top-color: #28f156;
            transform: rotateY(120deg) translateZ(30px) rotateX(-40deg);
        }

        .romb-top-face:nth-of-type(4) {
            border-bottom-color: #28f156;
            transform: rotateY(180deg) translateZ(30px) rotateX(40deg);
        }

        .romb-bottom-face:nth-of-type(4) {
            border-top-color: deeppink;
            transform: rotateY(180deg) translateZ(30px) rotateX(-40deg);
        }

        .romb-top-face:nth-of-type(5) {
            border-bottom-color: deeppink;
            transform: rotateY(240deg) translateZ(30px) rotateX(40deg);
        }

        .romb-bottom-face:nth-of-type(5) {
            border-top-color: #28f156;
            transform: rotateY(240deg) translateZ(30px) rotateX(-40deg);
        }

        .romb-top-face:nth-of-type(6) {
            border-bottom-color: #28f156;
            transform: rotateY(300deg) translateZ(30px) rotateX(40deg);
        }

        .romb-bottom-face:nth-of-type(6) {
            border-top-color: deeppink;
            transform: rotateY(300deg) translateZ(30px) rotateX(-40deg);
        }

        @keyframes spin {
            0% {
                transform: rotateY(0deg) rotateX(0deg);
            }

            50% {
                transform: rotateY(-180deg) rotateX(18deg);
            }

            100% {
                transform: rotateY(-360deg) rotateX(0deg);
            }
        } 

总结

按照这种方式，我们是不是可以搞出更多的3D图形，不妨可以试试哦。