CSS Tetrahedron

A tri­an­gle can be cre­ated in CSS by manip­u­lat­ing the bor­ders of an ele­ment. Com­bin­ing four tri­an­gles in a 3D space using -webkit-transform, these can be posi­tioned to form a tetra­he­dron (or pyra­mid if you prefer).

CSS pyra­mid — proof of con­cept
For now this only works in Safari 5.0.2+ and iOS, although 3D trans­forms will sur­face in Fire­fox 4 and the next build of Chrome. The demo doesn’t use JavaScript.

Com­bin­ing squares and tri­an­gles, cubes and pyra­mids, all sorts of 3D struc­tures are now pos­si­ble, if you are so inclined. Not nec­es­sar­ily use­ful, but possible.

The rota­tion is per­formed using a -webkit-animation, I’ve given the ani­ma­tion the name “spin”, which rotates the pyra­mid around Y from 0 to 360 degrees:

#pyramid {
-webkit-animation: spin 5s linear infinite;
-moz-animation: spin 5s linear infinite;
}

@-webkit-keyframes spin {
  from {
  	-webkit-transform: rotateY(0deg) rotateX(-20deg);
  }
  to {
  	-webkit-transform: rotateY(360deg) rotateX(-20deg);
  }
}

@-moz-keyframes spin {
  from {
  	-moz-transform: rotateY(0deg) rotateX(-20deg);
  }
  to {
  	-moz-transform: rotateY(360deg) rotateX(-20deg);
  }
}

If you haven’t seen it before, the code to cre­ate an approx­i­mate equi­lat­eral tri­an­gle is as follows:

#pyramid > div {
position: absolute;
border-color: transparent transparent transparent rgba(50, 50, 50, 0.5);
border-style: solid;
border-radius: 3px;
border-width: 200px 0 200px 346px;
}

Tan­tek Çelik coined this tech­nique in his study of reg­u­lar poly­gons which includes pen­tagons, hexa­gons and octagons. The meth­ods are explained over at the Fil­a­ment Group.

The 3D tech­niques I’ve used in this exper­i­ment are explained in my 3D cube post (July 2009). This is a proof of con­cept and I haven’t delved into the math­e­mat­ics or geom­e­try too much, instead opt­ing for the slightly faster but sig­nif­i­cantly less clever and less repro­ducible trial-and-error approach.

#pyramid > div:first-child  {
-webkit-transform: rotateY(-19.5deg);
-moz-transform: rotateY(-19.5deg);
}

#pyramid > div:nth-child(2) {
-webkit-transform: rotateY(90deg) rotateZ(60deg);
-moz-transform: rotateY(90deg) rotateZ(60deg);
}

#pyramid > div:nth-child(3) {
-webkit-transform: rotateX(60deg) rotateY(19.5deg);
-moz-transform: rotateX(60deg) rotateY(19.5deg);
}

#pyramid > div:nth-child(4) {
-webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px);
-webkit-transform-origin: 0 0 -326px;

-moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px);
-moz-transform-origin: 0 0 -326px;
}