css - 如何制作四面体？

Question

我正在尝试制作一个 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 四面体作为 Logo 是个好主意吗？如果是 SVG 会更好吗？

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

Answer 1

这里有几个步骤描述了制作响应式四面体的方法:demo - responsive tetrahedron .

link to animation

第 1 步的面孔:

一个 tetrahedron有4个三 Angular 形面。每张脸都是一个equilateral triangle .在以下示例中，我使用了 clip-path property制作4个等边三 Angular 形:

.tetra{
  position:relative;
  width:20%; 
  padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
  margin:0 auto;
}

.tetra div{
  position:absolute;
  top:0;left:0;
  width:100%; height:100%;
  -webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  background:teal;
}

.tetra .face2{
  transform-origin:0% 100%;
  transform:rotate(-60deg);
  background:gold;
}
.tetra .face3{
  transform-origin:100% 100%;
  transform:rotate(60deg);
  background:darkorange;
}
.tetra .face4{
  transform-origin:50% 100%;
  transform:rotate(180deg);
  background:pink;
}

<div class="tetra">
  <div class="face1"></div>
  <div class="face2"></div>
  <div class="face3"></div>
  <div class="face4"></div>
</div>

第 2 步制作 3d

为此，我们在 3d 环境中使用 perspective 分别旋转每个面。和 transform-style :

body{
  perspective:9000px;
}
.tetra{
  position:relative;
  width:20%; 
  padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
  margin:0 auto;  
  transform-style:preserve-3d;
}

.tetra div{
  position:absolute;
  top:0;left:0;
  width:100%; height:100%;
  -webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  background:teal;  
  transform-style:preserve-3d;
}

/* Rotation of –109.5° is angle(C, M[AB], D), per http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm, 180° – atan(2 * sqrt(2)) ≈ 109.5° */
.tetra .face2{
  transform-origin:0% 100%;
  transform:rotate(-60deg) rotatex(-109.5deg);
  background:gold;
}
.tetra .face3{
  transform-origin:100% 100%;
  transform:rotate(60deg) rotatex(-109.5deg);
  background:darkorange;
}
.tetra .face4{
  transform-origin:50% 100%;
  transform:rotate(180deg) rotatex(-109.5deg);
  background:pink;
}

<div class="tetra">
  <div class="face1"></div>
  <div class="face2"></div>
  <div class="face3"></div>
  <div class="face4"></div>
</div>

此时，您有一个四面体，但您只能看到 3 个面，因此可以看到整个 3d 形状:

第 3 步让它旋转!

顶看整个四面体，你需要用过渡或关键帧动画来旋转它:

body{
  perspective:9000px;
  padding-top:10%;
}
.tetra{
  position:relative;
  width:20%; 
  padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
  margin:0 auto;  
  transform-style:preserve-3d;  
  transform:rotatex(90deg) rotateY(0deg) rotatez(0deg);
  animation: rotate 10s linear infinite;
}

.tetra div{
  position:absolute;
  top:0;left:0;
  width:100%; height:100%;
  -webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  background:teal;  
  transform-style:preserve-3d;
}

/* Rotation of –109.5° is angle(C, M[AB], D), per http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm, 180° – atan(2 * sqrt(2)) ≈ 109.5° */
.tetra .face2{
  transform-origin:0% 100%;
  transform:rotate(-60deg) rotatex(-109.5deg);
  background:gold;
}
.tetra .face3{
  transform-origin:100% 100%;
  transform:rotate(60deg) rotatex(-109.5deg);
  background:darkorange;
}
.tetra .face4{
  transform-origin:50% 100%;
  transform:rotate(180deg) rotatex(-109.5deg);
  background:pink;
}
@keyframes rotate{
  50%{transform:rotatex(100deg) rotateY(10deg) rotatez(180deg);}
  100%{transform:rotatex(90deg) rotateY(0deg) rotatez(360deg);}
}

<div class="tetra">
  <div class="face1"></div>
  <div class="face2"></div>
  <div class="face3"></div>
  <div class="face4"></div>
</div>

请注意，这使用了并非所有浏览器都支持的属性，尤其是只有 chrome 支持的剪辑路径。此属性用于制作等边三 Angular 形，您可以使用其他方法(see here)。

有关浏览器支持和供应商前缀，另请参阅 canIuse for:

• clip-path
• 3d transforms
• CSS animations