发布于2022年10月15日2年前 实现效果： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #aa{ margin: 100px auto; width: 200px; height: 200px; transform-style: preserve-3d; position: relative; transform: rotateX(-15deg) rotateY(45deg); animation: name 6s linear 100ms infinite; } .bb{ position: absolute; width: 100px; height: 100px; left: 0; right: 0; background-color: rgba(232,222,45,0.6); } .qian{ transform: translateZ(50px); background-color: rgba(23,22,4,0.6); } .hou{ transform: translateZ(-50px); background-color: rgba(23,122,56,0.6); } .zuo{ transform: rotateY(270deg) translateZ(-50px); background-color: rgba(223,122,74,0.6); } .you{ transform: rotateY(270deg) translateZ(50px); background-color: rgba(13,22,254,0.6); } .shang{ transform: rotateX(270deg) translateZ(-50px); background-color: rgba(223,12,144,0.9); } .xia{ transform: rotateX(270deg) translateZ(50px); background-color: rgba(23,252,144,0.6); } @keyframes name{ from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);} to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);} } </style> </head> <body> <div id="aa"> <div class="bb qian"></div> <div class="bb hou"></div> <div class="bb zuo"></div> <div class="bb you"></div> <div class="bb shang"></div> <div class="bb xia"></div> </div> </body> </html>
创建帐户或登录后发表意见