Raja Raghav
Apr 16 · 2 min read
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

Programming sage

Modern web development simplified.

Raja Raghav

Written by

Eat. Sleep. Code. Repeat. https://www.rajaraghav.com https://instagram.com/raja__raghav

Programming sage

Modern web development simplified.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade