css - 如何制作四面体？

我正在尝试制作一个 CSS 四面体 ，所以我通过做一些 CSS3 三 Angular 形并使用透视属性激活 3D 转换来解决这个问题。

但是我有一些问题需要考虑所有转换，这是我的一些代码:

.navbar-brand-logo {
  width: 64px;
  height: 64px;
  transform-style: preserve-3d;
  perspective: 600px;
  position: relative;
}
.face {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: 64px 32px 0 32px;
  transform-origin: 0 0;
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
.logo-base-left {
  transform: rotateX(180deg) translateY(-64px);
}
.logo-base-right {
  transform: rotateY(180deg) rotateX(180deg) translateY(-64px);
}
.logo-up {
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
  transform: rotateY(180deg) scaleY(0.5) translateY(-64px);
}
.logo-down-up {
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
  border-width: 64px 0 0px 4px;
  transform: scaleX(128px) translateZ(0px);
}

<section class="navbar-brand-logo">
  <figure class="face logo-base-left"></figure>
  <figure class="face logo-base-right"></figure>
  <figure class="face logo-up"></figure>
  <figure class="face logo-down-up"></figure>
</section>

我无法想象如何制作另外两张脸(左上一张和右一张)。

这是一个 CodePen ，它说明了当前的尝试:

此外，使用 CSS3 四面体作为徽标是个好主意吗？
如果是SVG会更好吗？

由于浏览器支持，WebGL/Canvas 是禁忌。

最佳答案

如果您想为徽标设置动画(一次，在悬停时，无关紧要)，那么使用 3D CSS 可能是一个好主意。

使用 SVG，您将获得更好的浏览器支持、更快的渲染以及更轻松的形状控制，因此如果您不为徽标设置动画，我建议您使用 SVG。

要在 3D 中构建四面体的形状，请查看 Ana Tudor 的代码笔，这只是她制作的众多四面体示例之一:http://codepen.io/thebabydino/pen/vFrHx – 您可以在这支笔中使用动画 rot 以了解如何旋转/为其设置动画.

关于css - 如何制作四面体？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33332392/