一个简单有趣的css动画
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>3D旋转木马效果</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #box { width: 200px; height: 300px; animation: rotate 20s linear infinite; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto auto; transform-style: preserve-3d; } img { width: 100%; position: absolute; } img:nth-child(1) { transform: rotateY(0) translateZ(600px); } img:nth-child(2) { transform: rotateY(36deg) translateZ(600px); } img:nth-child(3) { transform: rotateY(72deg) translateZ(600px); } img:nth-child(4) { transform: rotateY(108deg) translateZ(600px); } img:nth-child(5) { transform: rotateY(144deg) translateZ(600px); } img:nth-child(6) { transform: rotateY(180deg) translateZ(600px); } img:nth-child(7) { transform: rotateY(216deg) translateZ(600px); } img:nth-child(8) { transform: rotateY(252deg) translateZ(600px); } img:nth-child(9) { transform: rotateY(288deg) translateZ(600px); } img:nth-child(10) { transform: rotateY(324deg) translateZ(600px); } @keyframes rotate { 0% { transform: rotateX(0) rotateY(0); } 25% { transform: rotateX(20deg) rotateY(180deg); } 50% { transform: rotateX(0) rotateY(360deg); } 75% { transform: rotateX(-20deg) rotateY(540deg); } 100% { transform: rotateX(0) rotateY(720deg); } } </style> </head> <body> <div id="box"> <ul> <img src="images/img1.jpg" alt="" /> <img src="images/img2.jpg" alt="" /> <img src="images/img3.jpeg" alt="" /> <img src="images/img4.jpeg" alt="" /> <img src="images/img5.jpg" alt="" /> <img src="images/img6.jpeg" alt="" /> <img src="images/img7.jpeg" alt="" /> <img src="images/img8.jpeg" alt="" /> <img src="images/img1.jpg" alt="" /> <img src="images/img2.jpg" alt="" /> </ul> </div> </body></html>