前言

《对王之王·对穿肠》
走马灯，灯走马，灯熄马停步。
飞虎旗，旗飞虎，旗卷虎藏身。

效果展示

GIF 2021-8-31 0-41-00.gif

实现思路

在下正是七省文状元兼参谋将军，绰号"对王之王"的对穿肠。今日给大家展示纯靠CSS实现的3D走马灯~
首先我们先要将元素排列好，给每个子元素都定义好3D转换，接着依次沿着Y轴进行3D旋转，紧接着为了3D效果的突出展示，我们需要在父元素上设置视距perspective属性，同时需要给转换的元素加上transform-style使其能够保留其3D转换，否则元素会变成2D的薄片~
最后我们可以为元素加上倒影的效果，使用 -webkit-box-reflect 属性，值得一提的是box-reflect的第一个属性值是 dirrection -方向:above向上，below向下，left向左，right向右。第二个属性值是 offset 距离：可以是数值，也可以是百分比。最后一个非常重要的功能就是可以再设置一个渐变值，利用这个渐变值，可以实现倒影的一个虚化效果~

代码演示

HTML

//HTML
<body>
    <div class="content">
        <div><img src="./images/image1.jpg" ></div>
        <div><img src="./images/image2.jpg" ></div>
        <div><img src="./images/image3.jpg" ></div>
        <div><img src="./images/image1.jpg" ></div>
        <div><img src="./images/image2.jpg" ></div>
        <div><img src="./images/image3.jpg" ></div>
    </div>
</body>

CSS

//CSS  
* {
    padding: 0;
    margin: 0;
}

body {
    height: 100vh;
    background-color: #000;
    perspective: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    margin-top: -150px;
    width: 300px;
    height: 180px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 20s linear infinite;
}

.content:hover {
    animation-play-state: paused;
}

img {
    width: 200px;
    height: 150px;
}

.content div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 通过html5的-webkit-box-reflect来做倒影 */
    /* box-reflect属性值有：
    direction-方向:above向上，below向下，left向左，right向右。
    offset距离：可以是数值，也可以是百分比。
    mask-box-image设置倒影的遮罩图像：linear-gradient线性渐变创建遮罩图像。
     */
    -webkit-box-reflect: below 15px linear-gradient(transparent 10%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
}

.content div:nth-child(1) {
    transform: translateZ(300px);
    background-color: #c14c39;
}

.content div:nth-child(2) {
    transform: rotateY(60deg) translateZ(300px);
    background-color: #6e9c72;
}

.content div:nth-child(3) {
    transform: rotateY(120deg) translateZ(300px);
    background-color: #5e5f7a;
}

.content div:nth-child(4) {
    transform: rotateY(180deg) translateZ(300px);
    background-color: #f5eb98;
}

.content div:nth-child(5) {
    transform: rotateY(240deg) translateZ(300px);
    background-color: #50a3bc;
}

.content div:nth-child(6) {
    transform: rotateY(300deg) translateZ(300px);
    background-color: #f9a99a;
}

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

注意： 因为这里面使用了 -webkit-box-reflect 私有属性，所以可能在某些浏览器上不兼容，同时在小程序中使用的时候要注意，ios上可能能正常显示，但是安卓可能就不行了，最差的结果就是我们在写一个倒过来的图片加上渐变来模拟这种表现形式~

与众不同的“走马灯”~

前言

效果展示

实现思路

代码演示

HTML

CSS