CSS transform 製作 3D 正多面體

這篇教學會延伸「transform 轉換函式」和「transform 3D 轉換與透視」兩篇文章的內容，實際運用 transform 製作正四面體、正六面體、正八面體和正十二面體，最後還會搭配 CSS animation 做出旋轉角度的動畫效果。

請先閱讀「transform 轉換函式、transform 3D 轉換與透視」。

快速導覽：

正四面體

正六面體

正八面體

正十二面體

CSS 教學 - CSS transform 製作 3D 正多面體

正四面體

正四面體由「四個正三角形」組成，正三角形的每個內角為 60 度，四個正三角形彼此之間的夾角為 70.5 度，由於 CSS 沒辦法直接繪製正三角形，需要透過 clip-path 將正方形裁切成正三角形，詳細說明可參考下方圖解的公式。

因為旋轉角度並非 90 度或 180 度，建議「先移動、再旋轉」，避免旋轉後三軸角度不同造成複雜計算。

CSS 教學 - CSS transform 製作 3D 正多面體 - 3D 正四面體圖解說明

下方範例會根據圖解公式，撰寫對應的 CSS 程式碼，因為當中會將 space 容器套用動畫效果，所以公式中先讓三角形的中心對準 space 正方形的中心，如此一來當旋轉 space 時，正四面體也會繞著中心移動。

線上展示：https://codepen.io/oxxo/pen/YPKwqGV

<!-- HTML 程式碼-->
<div class="camera">
  <div class="space">
    <div class="box b1"><b>1</b>oxxo</div>
    <div class="box b2"><b>2</b>oxxo</div>
    <div class="box b3"><b>3</b>oxxo</div>
    <div class="box b4"><b>4</b>oxxo</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  .camera {
    width: 200px;
    height: 200px;
    perspective: 300px;         /* 相機透視距離 */
    outline: 1px dashed #000;
    position: relative;
  }
  .space {
    position: absolute;         /* 使用絕對定位控制位置 */
    top: 60px;
    left: 50px;
    width: 100px;
    height: 100px;
    outline: 1px dashed #000;
    transform-style: preserve-3d;       /* 將子元素定義成同一組 3d 物件 */
    animation: oxxo 3s infinite linear; /* 執行動畫 */
  }
  .box {
    width: 100px;
    height: 100px;
    text-align: center;
    position: absolute;            /* 將子元素都是絕對定位，保持在同一個位置 */
    clip-path: polygon(0px 100px, 50px 13.3px, 100px 100px);  /* 裁切三角形 */
  }
  b {
    margin-top: 40px;
    font-size: 30px;
    line-height: 1;
    display: block;
  }
  .b1 {
    background: #f55c;
    /* 先沿著 Y 軸往上移動 25px，沿著 Y 軸旋轉 180deg 避免文字是相反的 */
    transform: translateY(-25px) rotateY(180deg);
  }
  .b2 {
    background: #09fc;
    transform-origin:center bottom;   /* 旋轉參考點為 X 軸底部 */
    /* 先沿著 Y 軸往上移動 25px，沿著 X 軸旋轉 -70.5deg */
    transform: translateY(-25px) rotateX(-70.5deg);
  }
  .b3 {
    background: #0a0c;
    transform-origin:center bottom;   /* 旋轉參考點為 X 軸底部 */
    /* 先沿著 Y 軸往上移動 68px，沿著 X 往左移動 25px，沿著 Z 軸旋轉 120deg，沿著 X 軸旋轉 -70.5deg */
    transform: translateY(-68px)  translateX(-25px) rotateZ(120deg) rotateX(-70.5deg);
  }
  .b4 {
    background: #f90c;
    transform-origin:center bottom;   /* 旋轉參考點為 X 軸底部 */
    /* 先沿著 Y 軸往上移動 68px，沿著 X 往右移動 25px，沿著 Z 軸旋轉 -120deg，沿著 X 軸旋轉 -70.5deg */
    transform: translateY(-68px)  translateX(25px) rotateZ(-120deg) rotateX(-70.5deg);
  }

  @keyframes oxxo {
    0% {transform: rotateX(50deg) rotateZ(0deg);}
    100% {transform: rotateX(50deg) rotateZ(360deg);}
  }
</style>

CSS 教學 - CSS transform 製作 3D 正多面體 - 3D 正四面體

正六面體 ( 正立方體 )

正六面體就是常見的正立方體，相對其他正多面體而言，正立方體因為角度全部都是 90 度，是最簡單就能做出來的多面體，詳細說明可參考下方圖解的公式。

CSS 教學 - CSS transform 製作 3D 正多面體 - 3D 正六面體 ( 正立方體 ) 圖解說明

下方範例會根據圖解公式，撰寫對應的 CSS 程式碼，也會將 space 容器套用動畫效果。

線上展示：https://codepen.io/oxxo/pen/GgKoZjO

<!-- HTML 程式碼-->
<div class="camera">
  <div class="space">
    <div class="box b1"><b>1</b>oxxo</div>
    <div class="box b2"><b>2</b>oxxo</div>
    <div class="box b3"><b>3</b>oxxo</div>
    <div class="box b4"><b>4</b>oxxo</div>
    <div class="box b5"><b>5</b>oxxo</div>
    <div class="box b6"><b>6</b>oxxo</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  .camera {
    width: 200px;
    height: 200px;
    perspective: 300px;         /* 相機透視距離 */
    outline: 1px dashed #000;
    position: relative;
  }
  .space {
    position: absolute;         /* 使用絕對定位控制位置 */
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;       /* 將子元素定義成同一組 3d 物件 */
    animation: oxxo 3s infinite linear; /* 執行動畫 */
  }
  .box {
    width: 100px;
    height: 100px;
    text-align: center;
    position: absolute;
  }
  b {
    margin-top: 25px;
    font-size: 30px;
    line-height: 1;
    display: block;
  }
  .b1 {
    background: #f55c;
    transform: rotateY(180deg) translateZ(50px);  /* 翻轉 180 度，沿 Z 軸移動 50px */
  }
  .b2 {
    background: #09fc;
    transform: rotateX(-90deg) translateZ(50px); /* 沿 X 軸翻轉 -90 度，沿 Z 軸移動 50px */
  }
  .b3 {
    background: #f90c;
    transform: rotateZ(90deg) rotateX(-90deg) translateZ(50px); /* 沿 Z 軸翻轉 90 度，沿 X 軸翻轉 -90 度，沿 Z 軸移動 50px */
  }
  .b4 {
    background: #0a0c;
    transform: rotateZ(180deg) rotateX(-90deg) translateZ(50px); /* 沿 Z 軸翻轉 180 度，沿 X 軸翻轉 -90 度，沿 Z 軸移動 50px */
  }
  .b5 {
    background: #c0cc;
    transform: rotateZ(-90deg) rotateX(-90deg) translateZ(50px); /* 沿 Z 軸翻轉 -90 度，沿 X 軸翻轉 -90 度，沿 Z 軸移動 50px */
  }
  .b6 {
    background: #cccc;
    transform: translateZ(50px);  /* 沿 Z 軸移動 50px */
  }

  @keyframes oxxo {
    0% {transform: rotateX(50deg) rotateZ(0deg);}
    100% {transform: rotateX(50deg) rotateZ(360deg);}
  }
</style>

CSS 教學 - CSS transform 製作 3D 正多面體 - 3D 正六面體 ( 正立方體 )

正八面體

正八面體由兩組「正三角形金字塔」組成，正三角形金字塔的每個三角形和下方正方形的夾角為 54.64 度，製作時只需要製作上方正三角形金字塔，接著只要改變角度方向，就可以做出下方正三角形金字塔，詳細說明可參考下方圖解的公式。

因為有些旋轉角度並非 90 度或 180 度，建議「先移動、再旋轉」，避免旋轉後三軸角度不同造成複雜計算。

CSS 教學 - CSS transform 製作 3D 正多面體 - 3D 正八面體圖解說明

下方範例會根據圖解公式，撰寫對應的 CSS 程式碼，也會將 space 容器套用動畫效果。

線上展示：https://codepen.io/oxxo/pen/pvzgyEY

<!-- HTML 程式碼-->
<div class="camera">
  <div class="space">
    <div class="box b1"><b>1</b>oxxo</div>
    <div class="box b2"><b>2</b>oxxo</div>
    <div class="box b3"><b>3</b>oxxo</div>
    <div class="box b4"><b>4</b>oxxo</div>
    <div class="box b5"><b>5</b>oxxo</div>
    <div class="box b6"><b>6</b>oxxo</div>
    <div class="box b7"><b>7</b>oxxo</div>
    <div class="box b8"><b>8</b>oxxo</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  .camera {
    width: 200px;
    height: 200px;
    perspective: 300px;         /* 相機透視距離 */
    outline: 1px dashed #000;
    position: relative;
  }
  .space {
    position: absolute;         /* 使用絕對定位控制位置 */
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    outline: 1px dashed #000;
    transform-style: preserve-3d;       /* 將子元素定義成同一組 3d 物件 */
    animation: oxxo 3s infinite linear; /* 執行動畫 */
  }
  .box {
    width: 100px;
    height: 100px;
    text-align: center;
    position: absolute;
    clip-path: polygon(0px 100px, 50px 13.3px, 100px 100px);  /* 裁切三角形 */
    transform-origin: center bottom;
  }
  b {
    margin-top: 40px;
    font-size: 30px;
    line-height: 1;
    display: block;
  }

  /* 正八面體上半部 */
  .b1 {
    background: #f55c;
    transform: rotateX(-54.64deg);
  }
  .b2 {
    background: #09fc;
    transform: translateX(-50px) translateY(-50px) rotateZ(90deg) rotateX(-54.64deg);
  }
  .b3 {
    background: #f90c;
    transform: translateY(-100px) rotateZ(180deg) rotateX(-54.6deg);
  }
  .b4 {
    background: #0a0c;
    transform: translateX(50px) translateY(-50px) rotateZ(-90deg) rotateX(-54.6deg);
  }

  /* 正八面體下半部 */
  .b5 {
    background: #c0cc;
    transform: rotateX(54.64deg);
  }
  .b6 {
    background: #cccc;
    transform: translateX(-50px) translateY(-50px) rotateZ(90deg) rotateX(54.64deg);
  }
  .b7 {
    background: #ff0c;
    transform: translateY(-100px) rotateZ(180deg) rotateX(54.64deg);
  }
  .b8 {
    background: #0c9c;
    transform: translateX(50px) translateY(-50px) rotateZ(-90deg) rotateX(54.64deg);
  }

  @keyframes oxxo {
    0% {transform: rotateX(75deg) rotateZ(0deg);}
    100% {transform: rotateX(75deg) rotateZ(360deg);}
  }
</style>

CSS 教學 - CSS transform 製作 3D 正多面體 - 3D 正八面體

正十二面體

正十二面體由上下兩組「六個正五角形」的蓋子所組成，正五邊形彼此相連時，會採用下列步驟組合，詳細說明可參考下方圖解的公式。

使用 108deg 與 36deg 進行順時鐘或逆時鐘翻轉組合平面。

使用 116.5deg 和 63.5deg 翻轉組成立方體 ( 116.5deg 是正十二面體內角 )。

下蓋需要以中心點旋轉 108deg ( 跟上蓋位置錯開 )。

正十二面體內切球半徑約 1.11 x 邊長 = 111，因此上下蓋需要往上與往下移動 111px。

CSS 教學 - CSS transform 製作 3D 正多面體 - 3D 正十二面體圖解說明

下方範例會根據圖解公式，撰寫對應的 CSS 程式碼，也會將 space 容器套用動畫效果。

線上展示：https://codepen.io/oxxo/pen/EaYPKNV

<!-- HTML 程式碼-->
<div class="camera">
  <div class="space">
    <div class="out up">
      <div class="box b1"><b>1</b>oxxo</div>
      <div class="box b2"><b>2</b>oxxo</div>
      <div class="box b3"><b>3</b>oxxo</div>
      <div class="box b4"><b>4</b>oxxo</div>
      <div class="box b5"><b>5</b>oxxo</div>
      <div class="box b6"><b>6</b>oxxo</div>
    </div>
    <div class="out down">
      <div class="box b7"><b>7</b>oxxo</div>
      <div class="box b8"><b>8</b>oxxo</div>
      <div class="box b9"><b>9</b>oxxo</div>
      <div class="box b10"><b>10</b>oxxo</div>
      <div class="box b11"><b>11</b>oxxo</div>
      <div class="box b12"><b>12</b>oxxo</div>
    </div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  .camera {
    width: 200px;
    height: 200px;
    perspective: none;         /* 相機透視距離 */
    outline: 1px dashed #000;
    position: relative;
    margin: 120px;
  }
  .space {
    position: absolute;         /* 使用絕對定位控制位置 */
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    outline: 1px dashed #000;
    transform-style: preserve-3d;       /* 將子元素定義成同一組 3d 物件 */
    animation: oxxo 3s infinite linear; /* 執行動畫 */
  }
  .box {
    width: 162px;
    height: 154px;
    text-align: center;
    position: absolute;
    clip-path: polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);  /* 裁切三角形 */
    transform-origin: center bottom;   /* 底部對齊旋轉 */
  }
  b {
    margin-top: 40px;
    font-size: 30px;
    line-height: 1;
    display: block;
  }
  .out {transform-style: preserve-3d;} /* 外殼 */
  .up {transform: translateY(-35px) translateX(-31px) translateZ(111px);} /* 上層外殼 */
  .down {
    transform-origin: 81px 85px;       /* 設定中心，避免旋轉時位置跑掉 162/2=81 169/2=85 */
    transform: translateY(-35px) translateX(-31px)  translateZ(-111px) rotateZ(108deg);
  }
  /* 正十二面體上半部 */
  .b1 {background: #f55c;}
  .b2 {
    background: #09fc;
    transform: rotateX(116.5deg);
  }
  .b3 {
    background: #f90c;
    transform: translateY(-47.5px) translateX(-65.5px) rotateZ(-108deg) rotateX(63.5deg);
  }
  .b4 {
    background: #0a0c;
    transform: translateY(-124.6px) translateX(-40.5px) rotateZ(-36deg) rotateX(63.5deg);
  }
  .b5 {
    background: #c0cc;
    transform: translateY(-124.6px) translateX(40.5px) rotateZ(36deg) rotateX(63.5deg);
  }
  .b6 {
    background: #cccc;
    transform: translateY(-47.5px) translateX(65.5px) rotateZ(108deg) rotateX(63.5deg);
  }
  /* 正十二面體下半部 */
  .b7 {
    background: #f99c;
    transform: rotateX(-116.5deg);
  }
  .b8 {
    background: #555c;
    transform: translateY(-47.5px) translateX(-65.5px) rotateZ(72deg) rotateX(-116.5deg);
  }
  .b9 {
    background: #ff0c;
    transform: translateY(-124.6px) translateX(-40.5px) rotateZ(144deg) rotateX(-116.5deg);
  }
  .b10 {
    background: #0ffc;
    transform: translateY(-124.6px) translateX(40.5px) rotateZ(-144deg) rotateX(-116.5deg);
  }
  .b11 {
    background: #060c;
    transform: translateY(-47.5px) translateX(65.5px) rotateZ(-72deg) rotateX(-116.5deg);
  }
  .b12 {background: #f55d;}

  @keyframes oxxo {
    0% {transform: rotateX(75deg) rotateZ(0deg);}
    100% {transform: rotateX(75deg) rotateZ(360deg);}
  }
</style>

CSS 教學 - CSS transform 製作 3D 正多面體 - 3D 正十二面體

小結

透過正四面體、正六面體、正八面體與正十二面體的操作，就能完整掌握 transform 的技巧和精髓，相信不論是那種變形，應該都可以順利解決。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS transform 製作 3D 正多面體

正四面體

正六面體 ( 正立方體 )

正八面體

正十二面體

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

規則與定義

函式類型

顏色與濾鏡

文字與段落

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩

視窗與使用者行為

範例效果