先看效果：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转木马</title> <style> .warpper { margin: 500px; perspective: 1600px; position: relative; perspective-origin: 50% 50%; } .first_box { width: 100px; height: 100px; line-height: 100px; font-size: 26px; text-align: center; transform-style: preserve-3d; animation: move 2s linear infinite; } .box { opacity: 0.5; position: absolute; width: 100px; height: 100px; } .box1 { transform: translateZ(50px); background-color: seagreen; } .box2 { transform: translateZ(-50px); background-color: sienna; } .box3 { transform: rotateX(90deg) translateZ(50px); background-color: red; } .box4 { background-color: #000000; transform: rotateX(-90deg) translateZ(50px); } .box5 { background-color: #004c8b; transform: rotateY(-90deg) translateZ(50px); } .box6 { background-color: #d1bd08; transform: rotateY(90deg) translateZ(50px); } @keyframes move { 100% { transform: rotateY(360deg) rotateX(360deg); } } </style> </head> <body> <div class="warpper"> <div class="first_box"> <div class="box1 box">box1</div> <div class="box2 box">box2</div> <div class="box3 box">box3</div> <div class="box4 box">box4</div> <div class="box5 box">box5</div> <div class="box6 box">box6</div> </div> </div> </body> </html>
