I am officially finished with the CSS Foundations course!
After finishing, I was still pretty curious about how tranforms and transitions worked, so I headed over to Codepen to play around a bit. I ended up creating this one with elements that rotate on a hover.
This pen is made up of 5 div elements that rotate in different ways when you hover over them. As I’m writing this, I realize that the names of my div names may not make the most sense to anyone but me, so I’ll likely go in and clean them up later.
When setting up the CSS for animations, you first have to set perspective to the parent element. The perspective property gives an element a 3D property by
The smaller the value, the bigger the effect (and, of course, vice versa).
The first three rotate on the Z, Y, and X axis respectively. The last two rotate on multiple axes, which creates a pretty cool effect (the last one disappears!).
Although this was an experiment with using CSS code, it made me aware that my design skills could be improved too. Color palettes are gorgeous but I never quite know how to apply them to anything.
Are there developers who never develop design skills?