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

我们平时看到的文字效果都是平面的，今天我们来做一个立体的，文字万花筒。如果把文字内容换成经文，感觉妥妥的是一会得道高僧在一直念经。

文字万花筒

由文字组件空心圆柱体的效果。

结构

因为需要利用文字围城一个圆柱体，所以需要的元素有点多，如下：

<div class="container">
    <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>
    <span style="--i:5">我是也笑</span>
    <span style="--i:6">我是也笑</span>
    <span style="--i:7">我是也笑</span>
    <span style="--i:8">我是也笑</span>
    <span style="--i:9">我是也笑</span>
    <span style="--i:10">我是也笑</span>
    <span style="--i:11">我是也笑</span>
</div>

样式

首先，需要准备一个呈现文字万花筒的一个3d容器，如下：

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

然后，需要给文字一些样式，需要给文字一个间距，一个文字阴影效果，一个旋转和位移效果，如下：

.container span {
    display: inline-block;
    text-align: center;
    letter-spacing: 1.5rem;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    text-shadow: 0 0 1rem cyan;
    transform: rotateX(calc(var(--i) * 30deg)) translateZ(3rem);
}

最后，给容器加上旋转动画效果，如下：

.container {
    animation: _animate 8s linear infinite;
}

@keyframes _animate {
    0% {
        transform: rotate3d(1, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(1, 0, 1, 360deg);

    }
}

效果

效果及其代码详情，如下：

总结

文字万花筒是通过多个文字片段旋转位移变换得到的，你可以通过改变文字片段的个数和旋转位移的数值来改变文字万花筒的大小，你也可以通过改变文字片段的内容或者背景色来赋予它其他的效果。