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

风起，呼呼呼的吹动着窗户，让我想起游乐场的旋转木马了，当然，之前我也写过一篇这样的文章：css绘制旋转木马，只不过这次是以另外的一种方式实现的，也增加一些倒影效果，有兴趣的可以两篇对比一下看。

旋转木马

结构

今天已六个面作为木马，如果需要更多则需要你去添加dom，或者通过js添加，配置一个动态的参数，这里仅仅是先写好dom的情况，如下：

<div class="camera">
    <div class="container">
        <div style="--i:0"></div>
        <div style="--i:1"></div>
        <div style="--i:2"></div>
        <div style="--i:3"></div>
        <div style="--i:4"></div>
        <div style="--i:5"></div>
    </div>
</div>

camera表示观看的角度，container代表的是旋转木马。

样式

首先，我们先给每个木马定义一个大小并给木马一个3d容器，如下：

.container {
    --size: 15rem;
    position: relative;
    width: var(--size);
    height: var(--size);
    transform-style: preserve-3d;
}

其次，我们需要给每个木马一个样式，需要旋转位移并给一个倒影效果，如下：

.container div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: radial-gradient(transparent,cyan);
    transform: rotateY(calc(var(--i) * 60deg)) translateZ(calc(var(--size) * 1));
    filter: hue-rotate(calc(var(--i) * 60deg));
    -webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0004);
}

这里我们需要注意的是：给的木马数为6，所以旋转角度的间隔为60deg，如果木马数为n，旋转角度间隔则为（360/n）deg。

接下来，我们需要给视觉角度来观看旋转木马，如下：

.camera {
    transform-style: preserve-3d;
    transform: rotateX(55deg);
}

最后，我们需要让木马动起来，那就需要加个简单的动画了，如下：

.container {
    animation: _animate 6s linear infinite;
}
@keyframes _animate{
    100%{
        transform: rotateY(360deg);
    }
}

效果

效果及其代码详情如下：

总结

3D的视觉会让立体的感觉体现的更明确一点，这样我们就可以做很多立体效果，来展示我们所表达的内容。