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.
You can choose to skip this part if you know the basics of
transform property essentially is the heart and soul of CSS animations. As the name suggests, it’s basically how you can transform
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:
You can read more about
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:
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.
That’s it folks
Hope this article helped you in understanding the
transform-origin property. Keep animation. Keep creating awesome stuff.