魔方是一款用 CSS 動畫制作的炫酷作品，也是展示 CSS 動畫技術(shù)的經(jīng)典案例之一。

.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.8);
border: 2px solid #FFF;
box-sizing: border-box;
text-align: center;
line-height: 200px;
font-size: 50px;
font-family: 'Arial';
opacity: 0.9;
transition: transform 0.2s ease-in-out;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(90deg) translateX(100px);
}
.left {
transform: rotateY(-90deg) translateX(-100px);
}
.top {
transform: rotateX(90deg) translateY(-100px);
}
.bottom {
transform: rotateX(-90deg) translateY(100px);
}

以上代碼是魔方的 CSS 樣式，通過對六個面的不同變換，實現(xiàn)立體的效果。這里使用了 transform-style 屬性設(shè)置為 preserve-3d，保持父元素立體性，以及 transform 屬性進(jìn)行旋轉(zhuǎn)和平移等操作。

通過設(shè)置 transition 屬性，可以實現(xiàn)魔方在變幻時的平滑過渡，增強了視覺效果。此外，利用 opacity 屬性，可以讓每個面有透明的感覺。最終的效果十分炫酷，是展示 CSS 動畫技術(shù)的典范之一。