要實現簡單的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旋轉魔方效果了。你可以根據需要調整容器的尺寸和樣式,以及動畫的持續時間和效果。