HTML5 3D正方體代碼：
3D效果的設計成為現在頁面的熱點技術之一，HTML5的出現增強了這種效果的展示。正方體是一個非常基礎也很受歡迎的3D模型，下面的代碼將演示如何使用HTML5實現一個3D正方體。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 3D正方體</title>
<style>
#box {
width: 200px;
height: 200px;
position: relative;
}
.side {
height: 200px;
position: absolute;
transition: transform 1s;
width: 200px;
}
.side:nth-child(1) {
background-color: blue;
transform: rotateY(0deg) translateZ(100px);
}
.side:nth-child(2) {
background-color: green;
transform: rotateY(90deg) translateZ(100px);
}
.side:nth-child(3) {
background-color: yellow;
transform: rotateY(180deg) translateZ(100px);
}
.side:nth-child(4) {
background-color: aqua;
transform: rotateY(-90deg) translateZ(100px);
}
.side:nth-child(5) {
background-color: orange;
transform: rotateX(90deg) translateZ(100px);
}
.side:nth-child(6) {
background-color: red;
transform: rotateX(-90deg) translateZ(100px);
}
.side:hover {
transform: rotateY(180deg) rotateX(180deg);
}
</style>
</head>
<body>
<div id="box">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
</body>
</html>代碼解析：
首先定義了一個200*200的div容器box，6個面的div作為box的子元素，每個面div的class屬性都為side。
#box {
width: 200px;
height: 200px;
position: relative;
}
.side {
height: 200px;
position: absolute;
transition: transform 1s;
width: 200px;
}接著，使用nth-child()偽類選擇器，分別對每個面的顏色和方向進行設置，以藍色面為例，利用rotateY()函數實現繞y軸旋轉0度，再利用translateZ()函數實現沿z軸平移100px。
.side:nth-child(1) {
background-color: blue;
transform: rotateY(0deg) translateZ(100px);
}最后，利用:hover偽類選擇器實現面的翻轉效果，rotateY()和rotateX()分別表示圍繞Y軸和X軸的旋轉角度，rotateY(180deg) rotateX(180deg)實現180度翻轉。
.side:hover {
transform: rotateY(180deg) rotateX(180deg);
}3D正方體代碼已成功實現，運行網頁即可看到效果。希望本文為大家提供了幫助，謝謝閱讀！