3D 金字塔组件（CSS 四棱锥旋转特效，线框/尺寸/轴向可调）

效果演示（真实可交互）

完整代码

构建四棱锥的关键：四个等腰三角面分别 rotateY(0°/90°/180°/270°) 展开到四个方向，再 translateZ(110px) 推到底面边缘，最后绕底边 rotateX(-35.4°) 向内倾斜——倾斜角由 sinθ = 半底边 ÷ 三角高 算出，使四个顶点恰好汇聚于中心正上方。底面用 rotateX(90deg) 平放补齐，顶点加发光圆点收尾。

<div class="scene">
  <div class="pyr">
    <div class="base"></div>
    <div class="face" style="--i:0"><svg viewBox="0 0 200 190"><polygon points="100,0 0,190 200,190"/></svg></div>
    <div class="face" style="--i:1"><svg viewBox="0 0 200 190"><polygon points="100,0 0,190 200,190"/></svg></div>
    <div class="face" style="--i:2"><svg viewBox="0 0 200 190"><polygon points="100,0 0,190 200,190"/></svg></div>
    <div class="face" style="--i:3"><svg viewBox="0 0 200 190"><polygon points="100,0 0,190 200,190"/></svg></div>
    <div class="apex"></div>
  </div>
</div>

.scene { height: 400px; perspective: 900px; display: flex; align-items: center; justify-content: center; }
.pyr {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  animation: spin 12s linear infinite;
}
.base {
  position: absolute; left: -110px; top: -110px;
  width: 220px; height: 220px; border-radius: 8px;
  border: 2px solid rgba(160, 180, 255, .55);
  transform: rotateX(90deg);               /* 平放成底面 */
}
.face {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 190px;
  margin-left: -100px; margin-top: -190px; /* 底边中点对齐圆心 */
  transform-origin: 50% 100%;              /* 绕底边旋转 */
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(110px) rotateX(-35.4deg);
  backface-visibility: hidden;
}
.face polygon { fill: rgba(108, 140, 255, .62); stroke: rgba(255, 255, 255, .45); stroke-width: 2; }
@keyframes spin { to { transform: rotateY(360deg); } }

线框模式只需把 polygon 的 fill 改为透明、stroke 改为霓虹色，即可呈现科技感线框金字塔（演示组件已内置该开关）。

参数说明

兼容性与性能

• 仅 6 个元素（4 面 + 1 底 + 1 顶点），GPU 合成开销极低
• 使用 SVG polygon 而非 clip-path 绘制三角面，描边可随 fill 开关自由切换，且无裁剪锯齿
• Chrome / Safari / Firefox / Edge 全支持；iOS Safari 保留 -webkit-transform-style: preserve-3d
• 面与面之间的接缝是透视投影的自然结果，属于正常视觉现象
• 不支持的旧浏览器中退化为重叠的半透明三角形平铺，内容不丢失

常见问题

Q: 四个三角面没有汇聚成一个顶点？ 倾斜角必须满足 sinθ = 半底边 ÷ 三角面高。改动了底边或三角面尺寸后，务必按公式重算 rotateX 角度，否则顶点会散开或交叉。

Q: 为什么面之间有缝隙？ 半透明面的边缘在透视下会有轻微透光缝隙，属正常现象。可略微加大三角面尺寸（如宽度 204px）让面轻微交叠，缝隙即消失。

Q: 想做成三棱锥（四面体）怎么改？ 把底面去掉，四个三角面改用 rotateY(0°/120°/240°) 配合各自的空间倾斜角即可；四面体每个面都是等边三角形，数学上更对称。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，配色、尺寸、线框样式均可自由修改。