Why CSS transforms scale and translate are inconsistent math wise?

Asked Mar 05 '19 at 14:47

Active Mar 05 '19 at 14:57

Viewed 351 times

I have a 100px*100px div with a square image as child. This image has a scale of 1.5, so the size is 150px*150px.

Now if I apply on the image a translation of 25px (X or Y), should I not have the image at the edge of its parent?

Currently I need to translate of 16px to get to the edge, that's make no sense to me. What is the calcul here?

I'm pretty sure I missing the obvious here, but I'm having a hard time to figure it out.

.parent {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 0 auto
}

img {
  width: 100%;
  height: auto;
  transform: scale(1.5) translateY(-25px);
  z-index: -1;
  position: relative;
}

https://codepen.io/geosenna/pen/pYNyjR

asked Mar 05 '19 at 14:47

user3415011

1

change the order of transformations: `translateY(25px) scale(1.5)` – Fabrizio Calderan Mar 05 '19 at 14:54
1

change the order, make the translation first and you will get what you want – Temani Afif Mar 05 '19 at 14:54
1

the duplicate talk about SVG but it's the same and it will show you the difference in the math between both if you switch the order – Temani Afif Mar 05 '19 at 14:55
that make so much sense now... thanks a lot and sorry for the duplicata – user3415011 Mar 05 '19 at 15:52

Why CSS transforms scale and translate are inconsistent math wise?

0 Answers0