CSS3实现旋转木马3D效果

2019-12-03 本文已影响0人前端王睿

在文章开始之前，先给大家展示下所谓的旋转木马3D效果。

旋转木马3D效果

你也可以直接 点击链接 查看。

是不是看起来很酷？这样的效果其实实现起来并不难，只需掌握其基本实现原理及CSS3中的一些知识点就OK了。

接下来我将结合一些简单的图示一步步地完成此效果。

一、添加图片元素

<body>
    <ul>
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <li><img src="./images/5.jpg" alt=""></li>
        <li><img src="./images/6.jpg" alt=""></li>
    </ul>
</body>

这里我添加了六张美女图片，并通过绝对定位把它们全部重叠到一起。

img{ max-width: 100%;}
ul{ position: relative; width: 180px; height: 320px; margin: 160px auto;}
ul li{ list-style: none; position: absolute; top: 0; left: 0;}

叠在一起所以只能看到最后一张

此时俯视示意图如下：

图片层叠（俯视图）

二、绕Y轴旋转图片

依次绕Y轴旋转图片，下张图片比上张图片大60°。

ul li:nth-of-type(1){ transform: rotateY(60deg);}
ul li:nth-of-type(2){ transform: rotateY(120deg);}
ul li:nth-of-type(3){ transform: rotateY(180deg);}
ul li:nth-of-type(4){ transform: rotateY(240deg);}
ul li:nth-of-type(5){ transform: rotateY(300deg);}
ul li:nth-of-type(6){ transform: rotateY(360deg);}

为了让整体看起来有3D效果，还需要给外部盒子添加一些样式。

body{ background: #000; perspective: 2000px; perspective-origin: 50% -100%; }
ul{ transform-style: preserve-3d;}

注：perspective 为景深，也就是添加近大远小的效果，它的值表示视角距离元素的距离；
perspective-origin 表示视角所在元素的横向和纵向位置；
transform-style: preserve-3d 表示视角效果为3D。

绕Y轴旋转图片

旋转图片成60°夹角（俯视图）

三、将图片沿Z轴平移

由于目前图片是交织在一起的，所以我们得通过沿Z轴（垂直屏幕）平移的方式将图片分离开来。

ul li:nth-of-type(1){ transform: rotateY(60deg) translateZ(-320px);}
ul li:nth-of-type(2){ transform: rotateY(120deg) translateZ(-320px);}
ul li:nth-of-type(3){ transform: rotateY(180deg) translateZ(-320px);}
ul li:nth-of-type(4){ transform: rotateY(240deg) translateZ(-320px);}
ul li:nth-of-type(5){ transform: rotateY(300deg) translateZ(-320px);}
ul li:nth-of-type(6){ transform: rotateY(360deg) translateZ(-320px);}

图片沿Z轴平移

图片沿Z轴平移（俯视图）

四、旋转整个3D盒子

ul{ animation: rotate 12s linear infinite;}
@keyframes rotate {
    100%{ transform: rotateY(360deg);}
}

最终实现效果如文章开头所示。

最终完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现旋转木马3D效果</title>
    <style>
        body{ background: #000; perspective: 2000px; perspective-origin: 50% -100%; }
        img{ max-width: 100%;}
        ul{ position: relative; width: 180px; height: 320px; margin: 160px auto; animation: rotate 12s linear infinite; transform-style: preserve-3d;}
        ul li{ list-style: none; position: absolute; top: 0; left: 0;}
        ul li:nth-of-type(1){ transform: rotateY(60deg) translateZ(-320px);}
        ul li:nth-of-type(2){ transform: rotateY(120deg) translateZ(-320px);}
        ul li:nth-of-type(3){ transform: rotateY(180deg) translateZ(-320px);}
        ul li:nth-of-type(4){ transform: rotateY(240deg) translateZ(-320px);}
        ul li:nth-of-type(5){ transform: rotateY(300deg) translateZ(-320px);}
        ul li:nth-of-type(6){ transform: rotateY(360deg) translateZ(-320px);}

        @keyframes rotate {
            100%{ transform: rotateY(360deg);}
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <li><img src="./images/5.jpg" alt=""></li>
        <li><img src="./images/6.jpg" alt=""></li>
    </ul>
</body>
</html>

怎么样？你学会了吗？