要在 HTML 中使用 CSS3 实现 3D 效果，可以使用 CSS3 的 transform 属性。transform 属性可以对元素进行旋转、缩放、移动和倾斜等变换。
其中，使用 perspective 属性定义透视距离，使元素具有 3D 效果。使用 rotateX、rotateY、rotateZ 等属性来使元素在三个不同的方向上旋转。
例如，下面的代码实现了一个立方体的 3D 效果：
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>.cube {
/* 设置透视距离 */
perspective: 1000px;
/* 设置容器大小和位置 */
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
/* 使容器具有 3D 效果 */
transform-style: preserve-3d;
/* 使容器在 x 轴上旋转 */
transform: rotateX(45deg);
}
.face {
/* 设置面大小和位置 */
width: 200px;
height: 200px;
position: absolute;
/* 使面具有 3D 效果 */
transform-style: preserve-3d;
/* 设置面背景颜色和透明度 */
background-color: rgba(255, 255, 255, 0.9);
/* 设置面边框 */
border: 1px solid #000;
/* 设置面的文本居中 */
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: bold;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}其中，关键词包括：