HTML5 3D旋轉(zhuǎn)魔方是一種有趣的動態(tài)效果，可以在網(wǎng)站中增加互動性和視覺吸引力。下面是一個簡單的HTML5 3D旋轉(zhuǎn)魔方代碼的示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 3D旋轉(zhuǎn)魔方</title>
<style>
#cube {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(45deg) rotateX(45deg);
-moz-transform: rotateY(45deg) rotateX(45deg);
transform: rotateY(45deg) rotateX(45deg);
}
#cube div {
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
border: 1px solid #666;
}
#cube .front {
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
transform: translateZ(50px);
}
#cube .back {
-webkit-transform: translateZ(-50px) rotateX(180deg);
-moz-transform: translateZ(-50px) rotateX(180deg);
transform: translateZ(-50px) rotateX(180deg);
}
#cube .top {
-webkit-transform: rotateX(90deg) translateZ(50px);
-moz-transform: rotateX(90deg) translateZ(50px);
transform: rotateX(90deg) translateZ(50px);
}
#cube .bottom {
-webkit-transform: rotateX(-90deg) translateZ(50px);
-moz-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
}
#cube .left {
-webkit-transform: rotateY(-90deg) translateZ(50px);
-moz-transform: rotateY(-90deg) translateZ(50px);
transform: rotateY(-90deg) translateZ(50px);
}
#cube .right {
-webkit-transform: rotateY(90deg) translateZ(50px);
-moz-transform: rotateY(90deg) translateZ(50px);
transform: rotateY(90deg) translateZ(50px);
}
</style>
</head>
<body>
<div id="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>該代碼使用了CSS3的3D轉(zhuǎn)化效果來創(chuàng)建一個魔方，通過CSS選擇器分別對魔方的六個面進(jìn)行樣式設(shè)置，包括背景色和位置。同時，代碼中解釋了魔方的旋轉(zhuǎn)方向和角度。嘗試修改代碼里的數(shù)值，可以制作出不同的魔方效果。