3d旋轉特效html源碼，用HTML和CSS實現效果特效
以下是一組用HTML和CSS實現3D旋轉特效的代碼例子：
<!DOCTYPE html>
<html>
<head>
<title>3D旋轉魔方相冊示例</title>
<style>
.cube-wrapper {
position: relative;
width: 200px;
height: 200px;
perspective: 800px;
}
.cube {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform .5s;
}
.side {
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
opacity: 0.8;
border: 1px solid #888;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
.cube-wrapper:hover .cube {
transform: rotateX(45deg) rotateY(45deg);
}
</style>
</head>
<body>
<h1>3D旋轉魔方相冊</h1>
<div class="cube-wrapper">
<div class="cube">
<div class="side front"></div>
<div class="side back"></div>
<div class="side right"></div>
<div class="side left"></div>
<div class="side top"></div>
<div class="side bottom"></div>
</div>
</div>
</body>
</html>這段代碼實現了一個立方體的3D旋轉特效。首先，我們通過父元素的`perspective`來定義透視視圖。然後定義了一個立方體的六個面，每一個面通過`transform`屬性來實現不同的3D效果，比如`translateZ`表示沿著z軸平移，`rotateY`表示繞y軸旋轉，`opacity`表示透明度。最後，在父元素的`hover`狀態下，通過`transform`實現了整個立方體的旋轉效果。
在這個例子中，通過CSS3的transform和transition屬性，可以神奇的實現3D旋轉效果，如何變幻奇妙，讓人眼前一亮。
