Harold Cooper

I wrote a little math thing last year, which featured equations like this:

Several people expressed surprise that the spinning diagrams don’t use any JavaScript or animated image formats, just HTML and CSS. So I thought I’d explain how they work before I forget.

A spinning cube

We can build a spinning cube, with a letter at each vertex.

For the HTML, we make a div for each letter and position it with translate3d:

 id="cube" style="width: 4em; height: 8em;">
   style="transform: translate3d(0em, 0em, 2em)">A
style="transform: translate3d(4em, 0em, 2em)">B
style="transform: translate3d(0em, 4em, -2em)">G
style="transform: translate3d(4em, 4em, -2em)">H