HTML 3D效果源代碼 HTML是一種標記語言，能為網頁添加各種前端效果。其中，3D效果是十分吸引人的一種。以下是一些HTML 3D效果的源代碼示例。 1. 立體翻轉

.card {
width: 200px;
height: 260px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}
.card .front,
.card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card .front {
background-color: #f00;
}
.card .back {
transform: rotateY(180deg);
background-color: #0f0;
}

2. 旋轉動畫

.box {
width: 200px;
height: 200px;
background-color: #fff;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.cube {
width: 200px;
height: 200px;
position: absolute;
transform-style: preserve-3d;
}
.front {
transform: translateZ(100px);
background-color: #f00;
}
.back {
transform: rotateY(180deg) translateZ(100px);
background-color: #00f;
}
.left {
transform: rotateY(-90deg) translateZ(100px);
background-color: #0ff;
}
.right {
transform: rotateY(90deg) translateZ(100px);
background-color: #f0f;
}
.top {
transform: rotateX(90deg) translateZ(100px);
background-color: #ff0;
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
background-color: #0f0;
}
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}

3. 立體盒子

.box {
width: 200px;
height: 200px;
border: 1px solid #000;
transform-style: preserve-3d;
transition: transform 1s;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back,
.left,
.right,
.top,
.bottom {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
}
.front {
background-color: #f00;
transform: translateZ(100px);
}
.back {
background-color: #00f;
transform: translateZ(-100px) rotateY(180deg);
}
.left {
background-color: #0ff;
transform: translateX(-100px) rotateY(-90deg);
}
.right {
background-color: #f0f;
transform: translateX(100px) rotateY(90deg);
}
.top {
background-color: #ff0;
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
background-color: #0f0;
transform: translateY(100px) rotateX(-90deg);
}

以上是HTML 3D效果的源代碼示例，通過這些代碼，我們可以為自己的網頁添加更加炫酷的3D效果。