How to make a tetrahedron?

Question

I am trying to make a CSS tetrahedron, so I have tackled the problem by doing some CSS3 triangles and activating the 3D transformations with the perspective property.

But I have some issues to wrap my mind over all the transformations, here is some of my code:

.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>

I am having issues to imagine how can I make the two other faces (the left up one and the right one).

Here is a CodePen which illustrate the current attempt:

Furthermore, is it a good idea to use a CSS3 tetrahedron as a logo? Would it be better if it was an SVG?

WebGL / Canvas is a no-no due to browser support.

Are you sure about browser support ? See https://stemkoski.github.io/Three.js/Shapes.html : it's working on most modern browsers — vals, Oct 26 '15 at 12:38
@vals: To be honest, I have the felt that the biggest problem with WebGL is video drivers on Linux for example. And I ask myself about the performance between WebGL vs 3D CSS. What about mobile? — Raito, Oct 27 '15 at 01:22
In some future there will be SVG 3D but as of currently there is only 2D support for svg. — Persijn, Oct 30 '15 at 11:35

score 5 · Answer 1 · edited Jun 05 '20 at 16:51

Here are a few steps describing an approach to make a responsive tetrahedron: demo - responsive tetrahedron.

link to animation

Step 1 the faces:

A tetrahedron has 4 triangular faces. Each face is an equilateral triangle. In the following example, I used the clip-path property to make the 4 equilateral triangles:

.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>

Step 2 make it 3d

For this, we rotate each face separately in the 3d environment with perspective and 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>

At this point, you have a tetrahedron but you can only see 3 face so to see the whole 3d shape:

Step 3 make it rotate!

Top see the whole tetrahedron, you need to rotate it with a transition or keyframe animation :

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>

Note that this uses properties that aren't supported by all browsers, especialy clip-path that is only supported by chrome. This property is used to make the equilateral triangles and you can use other approaches (see here).

For browser support and vendor prefixes, also see canIuse for:

@2540625 it is the angle `(C,MAB,D)` seen here : http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm `180 - atan(2*sqrt(2)) ~= 109.5 degrees` — web-tiki, Jun 05 '20 at 13:43

Olex Ponomarenko · Accepted Answer · 2015-11-02T19:24:50.023

3

If you want to animate the logo (once, on hover, doesn't matter), then going with 3D CSS is probably a good idea.

With SVG, you would get better browser support, faster rendering, and easier control over the shape, so if you're not animating the logo I'd suggest going with SVG.

For building the shape of a tetrahedron in 3D, check out Ana Tudor's codepen, this is but one of many tetrahedron examples she's made: http://codepen.io/thebabydino/pen/vFrHx – you can play with the animation rot in this pen to get an idea of how to rotate / animate it.

edited Nov 02 '15 at 19:24

answered Oct 25 '15 at 22:33

Olex Ponomarenko

905
7
10

1

Not sure if the original idea was from Lea but that pen (thebabydino) is Ana's. – Harry Oct 26 '15 at 13:32
Ya Harry's right. The pen is by Ana Tudor (thebabydino) – Max Payne Oct 27 '15 at 10:05
That CodePen's result is pretty, but its code needs comments. Why scaleX(1.155)? Why rotateX(19.47deg)? Why translateZ(4.6188em)? – 2540625 Jun 04 '20 at 17:32

score 1 · Answer 3 · edited Nov 13 '18 at 00:28

1

In organic molecules tetrahedra are often related helices, f.e.: Boerdijk–Coxeter helix. So it would be nice to write code to show this helix. Here is javascript for the helix:

var s set equal to the sides of the square canvas
var a=s/6, b=s/9;
c.beginPath();
for (var i=0; i<2*Math.PI; i+=0.01){
  x=s/4+a*Math.cos(i)-b*Math.sin(i);
  y=3*s/4+a*Math.cos(i)+b*Math.sin(i);
  if(i==0) {c.moveTo(x,y);} else {c.lineTo(x,y);}
}
c.lineWidth=1;
c.strokeStyle="#0f6";
c.stroke();

edited Nov 13 '18 at 00:28

Stephen Rauch

47,830
31
106
135

answered Nov 13 '18 at 00:00

Alex Shandor

11
2

Welcome to StackOverflow! While your contribution is very interesting, this is not actually an answer to the question that was originally asked. Please visit the help center for tips on how to answer questions. – Marcus Campbell Nov 13 '18 at 00:27

How to make a tetrahedron?

3 Answers3

Step 1 the faces:

Step 2 make it 3d

Step 3 make it rotate!