<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <!--抱歉，时间紧暂时只写了谷歌的方法，ie等浏览器的兼容还没写0.0.--> <title>C3旋转立方体</title> <style> * { margin: 0; padding: 0; } body { background-color: skyblue; } .box { margin: 100px auto; width: 200px; height: 200px; position: relative; /*3d旋转效果*/ transform: rotate3d(1, 1, 0, -30deg); /*保留旋转效果不让回来*/ transform-style: preserve-3d; /*喜欢添加景深效果的可以自己调节啊*/ perspective: 0px; /*角度*/ perspective-origin: 0px 0px; } .box > div { width: 200px; height: 200px; position: absolute; opacity: 0.5; text-align: center; line-height: 200px; } .front { background-color: #ffc96b; transform: translateZ(100px); } .back { background-color: #a2faff; transform: translateZ(-100px) rotate(180deg); } .left { background-color: #ffcef2; transform: translateX(-100px) rotateY(-90deg); } .right { background-color: #a2d1ff; transform: translateX(100px) rotateY(90deg); } .top { background-color: #f0f4ff; transform: translateY(-100px) rotateX(90deg); } .bottom { background-color: #26d8ff; transform: translateY(100px) rotateX(-90deg); } .box:hover { animation: move 5s infinite linear; } @keyframes move { from { transform: rotate3d(1, 0, 0, 290deg); } 50% { transform: rotate3d(0, 1, 0, -290deg); } to { transform: rotate3d(0, 0, 1, 266deg); } } </style> </head> <body> <div class="box"> <div class="front">FRONT</div> <div class="back">BACK</div> <div class="left">LEFT</div> <div class="right">RIGHT</div> <div class="top">TOP</div> <div class="bottom">BOTTOM</div> </div> </body> </html>