Understanding CSS transform-origin property

transform-origin tutorial

Making animations in CSS is both fun and daunting. It’s something even the pro web developers like to stay away from. Thanks to the W3 team and their documentation I believe anyone can master CSS animations. So let’s explore an exciting CSS animations property called ‘transform-origin’. But let’s understand what’s transform property in CSS.

Transform

You can choose to skip this part if you know the basics of transform property.

So, transform property essentially is the heart and soul of CSS animations. As the name suggests, it’s basically how you can transform div, span, images, etc. on a page (I didn’t say HTML page or webpage because CSS is now also used in creating IOS and Android apps). Transform usually includes:

1. translate (Move)
2. rotate
3. scale (Magnify/Diminish)
4. skew
5. matrix
6. perspective

You can read more about transform here

Transform-Origin

transform-origin property compliments the transform property. It allows us to tell the browser exactly at what coordinates we want the transformation to happen, using just CSS. Here’s how:

transform-origin:[x][y]

replace x and y with percentage values like 50% for mid, 0% for start and 100% for ending positions respectively. I’ve made a pen for helping you to understand this once and for all.

Transform origin Tutorial

That’s it folks

Hope this article helped you in understanding the transform-origin property. Keep animation. Keep creating awesome stuff.

Happy Coding