<!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
原文链接:https://www.cnblogs.com/ciscolee/p/12386819.html
本文来源 爱码网,其版权均为 原网址 所有 与本站无关,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源。
© 版权声明
文章版权归作者所有,未经允许请勿转载。