3D 正多面体
这篇教学会延伸“transform 转换函数”和“transform 3D 转换与透视”两篇文章的内容，实际运用 transform 制作正四面体、正六面体、正八面体和正十二面体，最后还会搭配 CSS animation 做出旋转角度的动画效果。
请先阅读“transform 转换函数、transform 3D 转换与透视”。
快速导览：
正四面体
正四面体由“四个正三角形”组成，正三角形的每个内角为 60 度，四个正三角形彼此之间的夹角为 70.5 度，由于 CSS 没办法直接绘制正三角形，需要透过 clip-path 将正方形裁切成正三角形，详细说明可参考下方图解的公式。
因为旋转角度并非 90 度或 180 度，建议“先移动、再旋转”，避免旋转后三轴角度不同造成复杂计算。
下方范例会根据图解公式，撰写对应的 CSS 程序码，因为当中会将 space 容器套用动画效果，所以公式中先让三角形的中心对准 space 正方形的中心，如此一来当旋转 space 时，正四面体也会绕着中心移动。
<!-- 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>
正六面体 ( 正立方体 )
正六面体就是常见的正立方体，相对其他正多面体而言，正立方体因为角度全部都是 90 度，是最简单就能做出来的多面体，详细说明可参考下方图解的公式。
下方范例会根据图解公式，撰写对应的 CSS 程序码，也会将 space 容器套用动画效果。
<!-- 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>
正八面体
正八面体由两组“正三角形金字塔”组成，正三角形金字塔的每个三角形和下方正方形的夹角为 54.64 度，制作时只需要制作上方正三角形金字塔，接着只要改变角度方向，就可以做出下方正三角形金字塔，详细说明可参考下方图解的公式。
因为有些旋转角度并非 90 度或 180 度，建议“先移动、再旋转”，避免旋转后三轴角度不同造成复杂计算。
下方范例会根据图解公式，撰写对应的 CSS 程序码，也会将 space 容器套用动画效果。
<!-- 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>
正十二面体
正十二面体由上下两组“六个正五角形”的盖子所组成，正五边形彼此相连时，会采用下列步骤组合，详细说明可参考下方图解的公式。
- 使用 108deg 与 36deg 进行顺时钟或逆时钟翻转组合平面。
- 使用 116.5deg 和 63.5deg 翻转组成立方体 ( 116.5deg 是正十二面体内角 )。
- 下盖需要以中心点旋转 108deg ( 跟上盖位置错开 )。
- 正十二面体内切球半径约 1.11 x 边长 = 111，因此上下盖需要往上与往下移动 111px。
下方范例会根据图解公式，撰写对应的 CSS 程序码，也会将 space 容器套用动画效果。
<!-- 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>
小结
透过正四面体、正六面体、正八面体与正十二面体的操作，就能完整掌握 transform 的技巧和精髓，相信不论是那种变形，应该都可以顺利解决。
微信扫码关注
抖音扫码关注