一个简单有趣的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> * { margin: 0px; padding: 0px; } #box2 { width: 200px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto auto; transform-style: preserve-3d; animation: cubeRotate 5s linear infinite; } .color_blue { width: 200px; height: 200px; position: absolute; } .cube1 { transform: rotateX(90deg) translateZ(100px); background: url(./images/img1.jpg) no-repeat center/cover; } .cube2 { transform: translateZ(-100px); background: url(./images/img2.jpg) no-repeat center/cover; } .cube3 { transform: rotateX(90deg) translateZ(-100px); background: url(./images/img3.jpeg) no-repeat center/cover; } .cube4 { transform: translateZ(100px); background: url(./images/img4.jpeg) no-repeat center/cover; } .cube5 { transform: rotateY(90deg) translateZ(100px); background: url(./images/img5.jpg) no-repeat center/cover; } .cube6 { transform: rotateY(90deg) translateZ(-100px); background: url(./images/img6.jpeg) no-repeat center/cover; } @keyframes cubeRotate { 0% { transform: rotateX(0) rotateY(0); } 25% { transform: rotateX(60deg) rotateY(180deg); } 50% { transform: rotateX(0) rotateY(360deg); } 75% { transform: rotateX(-60deg) rotateY(540deg); } 100% { transform: rotateX(0) rotateY(720deg); } } </style> </head> <body> <div id="box2"> <div class="color_blue cube1"></div> <div class="color_blue cube2"></div> <div class="color_blue cube3"></div> <div class="color_blue cube4"></div> <div class="color_blue cube5"></div> <div class="color_blue cube6"></div> </div> </body></html>