css旋转中心-（二十六）巧用CSS3轮播

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

持续创造，加速成长！这是我参加“掘金每日新计划·六月更新挑战”的第13天，点击查看活动详情

风吹着，呼呼地吹着门，让我想起了操场上的旋转木马，当然，之前我也写过这样的文章：css勾勒出旋转木马，不过这次是根据另外一个这个方法来实现的，并且它还减少了一些反射效应。 有兴趣的可以对比一下两篇文章。

轮播结构

如今css旋转中心，六张面孔被用作特洛伊木马。 如果需要更多，需要添加domcss旋转中心，或者通过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>

相机代表视角，容器代表轮播。

风格

首先，我们为每个木马定义一个大小，并给木马一个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视觉会让三维的感觉更加清晰，这样我们就可以做很多三维的效果来展现我们所表达的内容。