在文章开始之前，先给大家展示下所谓的旋转木马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>
怎么样？你学会了吗？
网友评论