<!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