<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cube</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #333; } ul { width: 300px; height: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; /*3d空间*/ transform-style: preserve-3d; animation: box 20s linear infinite; } @keyframes box { /*3d旋转 x y z deg*/ from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(1, 1, 1, 360deg); } } li { width: 300px; height: 300px; list-style: none; border: 1px solid black; position: absolute; opacity: 0.8; box-shadow: 0px 0px 10px white; } li:nth-child(1) { background: url(./../../正面.jpg); background-position: center; background-size: cover; transform: translateZ(150px); } /*后*/ li:nth-child(2) { background: url(./../../反面.jpg); background-position: center; background-size: cover; transform: translateZ(-150px); } /*左*/ li:nth-child(3) { background: url(./../../xuanjiezhimou.jpg); background-position: center; background-size: cover; transform: rotateY(90deg) translateZ(-150px); } /*右*/ li:nth-child(4) { background: url(./../../码上说故事_690.jpeg); background-position: center; background-size: cover; transform: rotateY(90deg) translateZ(150px); } /*上*/ li:nth-child(5) { background: url(./../../1.jpg); background-position: center; background-size: cover; transform: rotateX(90deg) translateZ(150px); } li:nth-child(6) { background: url(./../../3.PNG); background-position: center; background-size: cover; transform: rotateX(90deg) translateZ(-150px); } ul:hover { animation-play-state: paused; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> ———————————————— 版权声明：本文为CSDN博主「一殿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_41866776/article/details/96695938 </body> </html>
————————————————
版权声明：本文为CSDN博主「一殿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41866776/article/details/96695938