『纯 CSS 实现』使用 CSS 开发一个伪 3D 旋转圆柱持续创作，加速成长！这是我参与「掘金日新计划 · 10 月

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

前言

大家好，我是爱吃鱼的桶哥Z，前两天我们用 CSS 开发了一个炫酷的旋转小球，今天我们继续来开发一个伪3D 的旋转圆柱。老规矩，先来看一下最终实现的效果，如图所示：

可以看到这个效果还是非常炫酷的，实现的思路其实也不难，下面我们就一起来看一下如何实现这个效果吧！

一根圆柱体

首先我们先来实现一根圆柱体，然后多复制几份，改变它们的位置，最终就能实现上述图中展示的效果了。我们先来看一下基础的 html 代码，这次的这个效果中，我们大量运用到了 css 中的 var() 属性，接下来就一起看一下实现一根圆柱体的代码吧。

<section>
    <div class="layer"></div>
</section>

要实现一根圆柱体，只需要添加一个 class 为 layer 的 div 即可，接下来我们一起来看一下相关的 css 代码，如下：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #131313;
    overflow: hidden;
}
.layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 146px;
    height: 250vh;
    background: #fff;
    box-shadow: inset -10px 0 40px rgba(0, 0, 0, 1),
    inset 10px 0 40px rgba(0, 0, 0, 1),
    inset -10px 0 10px rgba(255, 255, 255, 0.25),
    inset 10px 0 10px rgba(255, 255, 255, 0.25),
    0 0 50px rgba(0, 0, 0, 1);
}

上述的基础 css 代码中，我们给 div 添加了 box-shadow 属性，通过 inset 设置阴影为内阴影状态，如果对 box-shadow 的使用还不清楚的童鞋，可以点击这里进行查看。实现的效果如下图所示：

可以看到这个圆柱体的基本样式已经出来了，接下来我们就修改它的样式，让它看起来跟最初的图片中的效果类似了，让我们一起来修改一下 css 代码，如下：

.layer {
    background: #222 radial-gradient(#6dff73 9px, #000 9px, #000 13px, transparent 13px);
    background-size: 36px 36px;
    transform: translate(-50%, -50%) rotate(45deg);
}

我们给 div 设置了一个 background 属性，其中运用到了 radial-gradient 属性，它的作用是创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成。它的形状可以是圆形或椭圆形。具体的用法可以点击这里进行查看，然后我们还设置了 background-size 属性，让 radial-gradient 属性生成的点的大小发生改变，最后将圆柱体的位置进行偏移和旋转，得到的效果如下图所示：

现在我们已经画出了一根圆柱体了，那么我们要画出多根圆柱体，且它们的方向和偏移位置都不一致，我们该如何实现呢？

多根圆柱体

在上述的 css 代码中，我们很多代码都是可以复用的，那么我们有什么办法让每个圆柱体上的属性根据它们自身来改变呢？其实也很简单，还记得我们在前面文章中用到的办法吗？在每个标签上设置一个 style 属性，然后通过 --x 这样的方法来设置它们自己的值，接下来我们就一起来修改一下 html 吧，代码如下：

<div class="layer" style="--y:-50%;--color:#6dff73;--deg:45deg;"></div>
<div class="layer" style="--y:-38%;--color:#db0aff;--deg:45deg;"></div>
<div class="layer" style="--y:-62%;--color:#03a9f4;--deg:45deg;"></div>

我们先画出三根圆柱体，接下来我们就需要修改 css 代码了，让我们设置在 html 中的 --y 能够在 css 中进行使用，css 代码如下：

.layer {
    background: #222 radial-gradient(var(--color) 9px, #000 9px, #000 13px, transparent 13px);
    background-size: 36px 36px;
    transform: translate(-50%, var(--y)) rotate(var(--deg));
}

修改后的 css 中，我们通过 var() 从标签上获取到对应的值，实现的效果如下所示：

可以看到我们已经实现了三根颜色各异的圆柱体了，接下来我们完成剩下的圆柱体，修改 html 即可，代码如下：

<section>
    <div class="layer" style="--y:-50%;--color:#6dff73;--deg:45deg;--zIndex:11;--animate: animate"></div>
    <div class="layer" style="--y:-38%;--color:#db0aff;--deg:45deg;--zIndex:3;--animate: animate2"></div>
    <div class="layer" style="--y:-62%;--color:#03a9f4;--deg:45deg;--zIndex:3;--animate: animate"></div>
    <div class="layer" style="--y:-26%;--color:#f4f003;--deg:45deg;--zIndex:12;--animate: animate2"></div>
    <div class="layer" style="--y:-74%;--color:#f45b03;--deg:45deg;--zIndex:10;--animate: animate"></div>
    <div class="layer" style="--y:-50%;--color:#e91e63;--deg:-45deg;--zIndex:11;--animate: animate2"></div>
    <div class="layer" style="--y:-38%;--color:#db0aff;--deg:-45deg;--zIndex:3;--animate: animate"></div>
    <div class="layer" style="--y:-62%;--color:#03a9f4;--deg:-45deg;--zIndex:3;--animate: animate2"></div>
    <div class="layer" style="--y:-26%;--color:#ffc109;--deg:-45deg;--zIndex:12;--animate: animate"></div>
    <div class="layer" style="--y:-74%;--color:#cf0;--deg:-45deg;--zIndex:10;--animate: animate2"></div>
</section>

在上述的 html 中，我还在 style 属性中添加了 --zIndex 和 --animate 属性值，这两个值是为了后面改变当前圆柱体的图层以及做旋转动画的，这里先添加上。

接下来我们继续修改 css 代码，让所有的圆柱体都能够动起来，一起来看最后的代码，如下：

.layer {
    background: #222 radial-gradient(var(--color) 9px, #000 9px, #000 13px, transparent 13px);
    background-size: 36px 36px;
    transform: translate(-50%, var(--y)) rotate(var(--deg));
    z-index: var(--zIndex);
    animation: var(--animate) 2s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 36px -36px;
    }
}
@keyframes animate2 {
    0% {
        background-position: 36px -36px;
    }
    100% {
        background-position: 0 0;
    }
}