纯css实现旋转的陀螺

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

前言

今天我们实现一个旋转的陀螺，大家还记得小时候玩过的抽陀螺吗？来回忆一下

通过图片我们可以看到陀螺就像一个凌锥形状。

实现

想了一下立体圆锥一时没什么思路，那就用平面代替吧！通过分析如图。
仔细查看可以发现，分为顶部的正方形，再加上四个三角面。好了先实现平面

平面实现

正方形div应该也没啥好说的，看看三角形实现吧方式有很多种！这里用border实现，见代码！

 <div class="one">1</div>
 
 //css
 width: 0;
 height: 0;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 border-top: 200px solid rgba(160, 62, 132, 0.5);

3d立体效果实现

好了一个三角形现在实现了，那就写四个吧!然后通过transform调整好四个边角度。既然是3d那就必须在3d环境中，transform-style: preserve-3d;，之前案例文章中提过很多，欢迎看看！好了上代码

      <div class="box">
        <div class="square">
            <div class="one">1</div>
            <div class="two">2</div>
            <div class="three">3</div>
            <div class="four">4</div>
        </div>
        </div>
        //css
         body {
        background: #eee;
    }

    .box {
        width: 500px;
        height: 500px;
        margin: 300px auto;
    }

    /* 正方形 */
    .square {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transform: translateY(0) rotate3d(0, 1, 0.5, 227deg);
    }

    .square div {
        position: absolute;
        top: 90px;

    }

    .one {
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 200px solid rgba(160, 62, 132, 0.5);
        transform: rotateX(-30deg) rotateY(0deg) translateZ(58px);
    }

    .two {
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 200px solid rgba(160, 62, 132, 0.5);
        transform: rotateY(90deg) rotateX(-30deg) translateZ(58px);
    }

    .three {
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 200px solid rgba(160, 62, 132, 0.5);
        transform: rotateX(30deg) rotateY(180deg) translateZ(58px);
    }

    .four {
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 200px solid rgba(160, 62, 132, 0.5);
        transform: rotateY(-90deg) rotateX(-30deg) translateZ(58px);
    }

效果图：

note:transform中rotateY rotateX rotate等参数不同设置的顺序呈现效果是不一样的

添加动画

最后我在顶部盖上正方形，然后开始实现动画吧！想了一下我们这边刚好适合使用transform:rotate3d, 通过调整x、y、z坐标方向的矢量和a的旋转角度就实现了类似陀螺跌跌撞撞的旋转效果。

 @keyframes rotate {
        from {
            transform: translateY(0) rotate3d(0, 1, 1, 0deg);
        }

        to {
            transform: translateY(0) rotate3d(0, 1, 0.1, 360deg);
        }
    }

还不了解的查看连接rotate3d

结尾上代码：

结尾

最后有没有小伙伴知道怎么实现圆柱形陀螺呢？