Of course, you have to start with the traditional spinning cube. It’s practically the “Hello World!” of 3D animation:
That’s the easy part. The hard part is using equilateral CSS triangles to build a spinning octahedron:
And then pulling together even more trigonometry to build an icosahedron:
Which was, while confusing at times, a surprisingly fun puzzle to solve.
A couple of pure (mostly) CSS widgets/toys I came up with as part of an actual project today.
Continue reading Fun with CSS
I put “right” in quotes because, well, I’m opposed to gimmicky animations in web pages on principle. However, if you have to use them, they should be done efficiently.
To that end, I found this article on Medium from May 2014 that has a series of tips, at least four of which I’ve put into effect just this morning and one of which I never even knew existed before today.
Because I wanted to see if I could. It’s probably not the best way to implement it, but it works.
See the Pen CSS3 flip card with six sides by Martin Blase (@mblase75) on CodePen.