How to make a tetrahedron? - css

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.

Answer 1

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:
clip-path
3d transforms
CSS animations

Answer 2

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.

Answer 3

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();