阅读量:0
要实现简单的3D旋转魔方，你可以使用CSS的transform属性来实现旋转效果。
首先，创建一个HTML元素作为魔方的容器：
<div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face top"></div> <div class="face bottom"></div> <div class="face left"></div> <div class="face right"></div> </div> 然后，使用CSS样式来定义魔方的外观和动画效果：
.cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); animation: spin 10s infinite linear; } @keyframes spin { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } .cube .face { position: absolute; width: 200px; height: 200px; background-color: #aaa; opacity: 0.8; } .cube .front { transform: translateZ(100px); } .cube .back { transform: translateZ(-100px) rotateY(180deg); } .cube .top { transform: rotateX(90deg) translateZ(100px); } .cube .bottom { transform: rotateX(-90deg) translateZ(100px); } .cube .left { transform: rotateY(-90deg) translateZ(100px); } .cube .right { transform: rotateY(90deg) translateZ(100px); } 这样，你就可以看到一个简单的3D旋转魔方效果了。你可以根据需要调整容器的尺寸和样式，以及动画的持续时间和效果。
