Rotating Cat Cube
This blog post contains adapted code from David DeSandro’s excellent Intro to CSS 3D transforms (License). I highly recommend reading it!
The CSS animation
Here is my beloved cat, Mary, rotating around (thanks to Seattle’s Alley Cat Project for helping me find her ♥️):
Background
While reading Hacker News I found this post titled “Spinning Diagrams with CSS”. Based on the number of points, it seems that most hackers are unaware of the possibility of 3D CSS transformations.
This post interested me because it fits into a running joke within my team. My team’s internal documentation is hosted on a framework that doesn’t support importing scripts, so we have gone back and forth changing our docs to have goofy CSS-only animations like img slowly expanding or bouncing like the old DVD logo. Finding that 3D transformations was possible took our running joke to the next dimension.