Day notes: CSS icon transforms

I don't think I've worked on a website that makes much use of CSS transforms yet, so I decided to have a little play around with them.

The transform property allows you to manipulate attributes like the size, co-ordinates and position of an element. Several are commonly used in 2d transforms such as rotate, skew, scale and translate. I set up examples on Codepen.

I'm interested in creating subtle effects on icons using animations and transforms. I've seen JavaScript libraries that can help with this, but unless a site is full of SVG animations, I'm reluctant to add a whole library to it. So I've started creating some icons in CSS to play around with. Here's two I made on Codepen:

See the Pen Menu icon CSS transition by Lottejackson (@lottejackson) on CodePen.