持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

相信大家都见过齿轮⚙️运动的效果，是不是感觉机械美也是很美的呢，今天就来实现齿轮运动的效果。

齿轮运动

齿轮运动，首先要有齿轮，然后它可以自动旋转，但是这个运动的立体效果，我们需要它的父级进行倾斜，这样才能看到完整的运动效果。

结构

因为要做成3D的效果，所以代码的层级会多一点，如下：

<div class="rotate">
    <div class="gear">
        <span style="--i:0"></span>
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
        <span style="--i:4"></span>
    </div>
</div>

rotate对应元素是为了更好的看到齿轮运行效果，而gear元素就是来实现齿轮效果的。

样式

首先，我们需要实现齿轮效果，这个齿轮有十个齿，并且为了区分一下，我们给齿几种不同的色彩，如下：

.gear {
    --w: 5rem;
    --h: calc(var(--w) * 2.5);
    width: var(--w);
    height: var(--h);
    position: relative;
    transform-style: preserve-3d;
}

.gear span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    transform: rotateX(calc(72deg * var(--i)));
    background: cyan;
    filter: hue-rotate(calc(72deg * var(--i)));
}

其次，我们需要看到整个齿轮的效果，这样的话，我们就需要给它的父级元素以下样式：

.rotate {
    transform-style: preserve-3d;
    transform: rotate3d(1, 1, 1, 220deg);
}

最后呢，我们需要齿轮运动起来，所以需要给它添加动画，如下：

.gear {
    animation: _animate 5s ease-in infinite;

}
@keyframes _animate {
    100% {
        transform: rotateX(360deg);
    }
}

效果

效果及代码详情如下：

总结

这个效果注意使用CSS 3D效果实现的，不过在完成这个效果过，发生了一个有意思的事情：当你紧盯着这个画面的时候，齿轮的运动的倾斜角度感觉是发生变化的（实际倾斜角度是固定的），当然也有可能是我看花了。