Transform origin property W3S

HTML & CSS
1

Link

What is the utility of this property →

transform: rotate(45deg);

because even if we delete this nothing happens.

2

If I am not wrong then the transform-origin property is used to shift across X and Y axis.

3

The browser must still be supporting the vendor prefixed rules. Try

#div2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
   /* -ms-transform: rotate(45deg); *//* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
  /*  -webkit-transform: rotate(45deg); *//* Safari 3-8 */
    -webkit-transform-origin: 20% 40%; /* Safari 3-8 */
  /*  transform: rotate(45deg);*/
    transform-origin: 20% 40%;
}
1 Like
4

In geometry axis works like this →

825×589 3.63 KB

It is understandable what is -ve X-axis or what is -ve Y axis.

In this example →
https://www.w3schools.com/cssref/trycss3_transform-origin_inuse.htm

when I increase the Y axis it should go up, but it is not. why so?

5

I believe the X and Y are in relation to quadrant IV (lower right) not quadrant I (upper right) so an increase in the X value will be to the right but an increase in the Y value will be lower. (distance from point 0,0)

Try experimenting with this

2 Likes
6

what coordinates are they taking as 0,0 because see in the third it is shifted towards left as compared to the first one and the second one. I think in the absence of any specification(1st and 2nd in the image) it is 0,0 coordinates on the geometrical plane then why in 3rd case when the (0,0) is specified it is shifted towards the left.

882×599 16.1 KB

7

The initial (default value) is 50%.

Initial value 50% 50% 0

Which keeps the rotation centred.

3 Likes
8

Top left.

3 Likes
9

I still have some confusion in understanding the coordinates. Hopefully, I will resolve that someday.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.