以下是一组用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旋转效果，如何变幻奇妙，让人眼前一亮。