HTML5是一種重要的Web技術，它被廣泛應用于各種網站和應用程序中。使用HTML5，我們可以輕松地創建出各種動態效果，如旋轉立方體。下面是使用HTML5實現旋轉立方體的代碼：
<!DOCTYPE html>
<html>
<head>
<title>旋轉立方體</title>
<style>
#container {
position: relative;
width: 200px;
height: 200px;
perspective: 800px;
}
#cube {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
#cube div {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.8);
border: 2px solid #000;
text-align: center;
font-size: 48px;
line-height: 200px;
}
#front {
transform: translateZ(100px);
}
#back {
transform: translateZ(-100px) rotateY(180deg);
}
#right {
transform: rotateY(-90deg) translateZ(100px);
}
#left {
transform: rotateY(90deg) translateZ(100px);
}
#top {
transform: rotateX(-90deg) translateZ(100px);
}
#bottom {
transform: rotateX(90deg) translateZ(100px);
}
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
</style>
</head>
<body>
<div id="container">
<div id="cube">
<div id="front">1</div>
<div id="back">6</div>
<div id="right">2</div>
<div id="left">5</div>
<div id="top">3</div>
<div id="bottom">4</div>
</div>
</div>
</body>
</html>上面的代碼使用了CSS的transform屬性和animation屬性來實現立方體的旋轉效果。其中，transform-style屬性用于指定立方體的子元素也要應用立體變換，而perspective屬性則用于指定立體空間的視距大小。通過定義每個面的transform屬性，我們實現了立方體的旋轉和立體效果。
上一篇文字豎向 css