Hover Me!

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!).

See the Pen CSS 3D Transform by Cerita (@cerita) on CodePen.

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?

Advertisements

2 thoughts on “Hover Me!

  1. I know exactly what you mean with the design skills… I feel like I’m always struggling to decide which colour and designs to use… But you know what – that’s what designers are for! But still, I wish I was a bit better at it.
    Btw, how did you embed the codepen thing into your post? Looks really cool!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s