使用純HTML/CSS實現令人驚歎的3D效果

HTML 和 CSS 可能是二維網頁設計的基石，但在它們的虛擬工具箱中卻隱藏著建立令人驚歎的三維視角的祕密。試想一下，在製作互動介面時，如何超越平面，進入一個 X、Y 和 Z 軸共舞的世界。在本篇博文中，我們將為您揭開 HTML 和 CSS 3D 功能的神奇面紗，指導您使用基本屬性和技術來建立令人驚歎的 3D 視覺效果。

比如這個：

在 HTML 中利用透視技術

雖然 HTML 和 CSS 主要用於構建 2D 佈局，但仍有 3 個軸（X、Y 和 Z）可以通過特定的 CSS 屬性建立透檢視。

perspective 屬性

perspective（透視）屬性通過沿 Z 軸調整消失點的位置來改變使用者的視角。

例如，使用以下程式碼片段將在使用者和平面（Z 軸）之間建立 800px 的距離。

.perspective {
position: relative;
perspective: 800px;
}

<div></div>

perspective-origin 屬性

perspective-origin（透視原點）屬性決定了使用者沿 X 軸和 Y 軸的位置。

要從上方檢視物件，可以使用以下程式碼：

.perspective {
position: relative;
perspective: 800px;
perspective-origin: 50% -200px;
}

在本例中，我們將 X 軸居中（50%），Y 軸的位置為 -200px。

現在，您已經掌握了 HTML 和 CSS 中的 3D 要素，讓我們開始建立自己的 3D 立方體吧！

1. 打好基礎

在 HTML 結構中，我們將構建一個透視平面，併為立方體的每個面新增一個 div 元素。

<div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

現在，讓我們為透視平面賦予一個特定的視角。在我們的案例中，我們希望看到立方體的俯檢視。

.perspective {
perspective: 800px;
perspective-origin: 50% -200px;
}

然後，我們將為方框指定尺寸，併為各個面應用樣式。為了在 div 中的透視平面內保持 3D 渲染，我們使用了 transform-style: preserve-3d 。

.box {  
width: var(--size);
aspect-ratio: 1;  
position: relative;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: var(--size);
aspect-ratio: 1;
background-color: hsl(
39,
100%,
66%
);
transform-style: preserve-3d;
}

這時，你會看到所有的面都疊加在同一位置，形成一個正方形。

2. 製作圖案

現在，讓我們製作立方體的二維圖案，然後像摺紙一樣將其摺疊。此外，我們還將加入旋轉動畫，以獲得更好的 3D 視覺化效果。

建立圖案可以簡化旋轉和精確定位元素的過程，防止倒置面的混淆。

.box {  
animation: rotate 4s linear infinite;
}
.face.front {
}
.face.bottom {
top: 100%;
}
.face.top {
bottom: 100%;
}
.face.back {
bottom: 200%;
}
.face.right {
left: 100%;
}
.face.left {
right: 100%;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotateY(360deg);
}
}

現在，你應該看到一個十字形的配置：

3. 摺疊表面製作立方體

下一步是摺疊面以建立立方體效果。這需要使用 rotateX() 、 rotateY() 並通過 transform-origin 指定摺疊的頂點。

對於背面，我們需要調整 Y 軸和 Z 軸的 transform-origin，因為它與正面相距兩個面。

.face.front {
}
.face.bottom {
top: 100%;
transform-origin: top;
transform: rotateX(-90deg);
}
.face.top {
bottom: 100%;
transform-origin: bottom;
transform: rotateX(90deg);
}
.face.back {
bottom: 200%;
transform-origin: center 150px -50px;
transform: rotateX(180deg);
}
.face.right {
left: 100%;
transform-origin: left;
transform: rotateY(90deg);
}
.face.left {
right: 100%;
transform-origin: right;
transform: rotateY(-90deg);
}

4.為面部新增陰影

為了獲得較為逼真的 3D 效果，我們需要為面部新增陰影。雖然 CSS 缺乏原生光照，但我們可以通過改變顏色的明暗度來營造出深度的錯覺。

我們將利用 hsl() 的 lightness 屬性為每個面孔建立不同的陰影。

.face {  
background-color: hsl(
39,
100%,
var(--lightness)
);
}
.face.front {
--lightness: 66%;
}
.face.bottom {
--lightness: 74%;
}
.face.top {
--lightness: 74%;
}
.face.back {
--lightness: 78%;
}
.face.right {
--lightness: 70%;
}
.face.left {
--lightness: 70%;
}

現在，你將看到一個絢麗的 3D 立方體，它完全由 HTML 和 CSS 製作而成！

希望本教程能點燃你的想象力，用純 HTML 和 CSS 製作出迷人的 3D 動畫。