Question 45890 in CSS Question posted in
Some basic documentation can be found here.

why are rotateX and rotateY on the incorrect axis – CSS

I’ve been experimenting with an animation on my site that uses the rotateX and rotateY functions of the transform property.

I’ve found that – for some reason – they both seem to be using the incorrect axis’; rotating on Y will rotate left and right, and rotating on X will rotate up and down.

Why is this? To my surprise, I had a quick search and couldn’t find anything, even on the transforms spec.

div{
  width: 100px;
  height: 100px;
}

.vertical{
  background-color: red;
  transform: perspective(100px) rotateX(20deg);
  margin-bottom: 30px;
}

.horizontal{
  background-color: blue;
  transform: perspective(100px) rotateY(20deg);
}
<div class="vertical"></div>
<div class="horizontal"></div>
Tags:

2

Answers


  1. 0

    The rotateX and rotateY functions indicate around which axis the rotation will occur, not in which direction.

    When using the rotateY function, the rotation will occur around the y-axis of the element being transformed. This means that if you want the element to appear to rotate left and right, you need to rotate it around the y-axis. Similarly, when using the rotateX function, the rotation occurs around the x-axis of the element being transformed, so it will rotate up and down.

    Here are some examples of how rotateX works

    Login or Signup to reply.
  2. 0

    Don’t confuse around with in the direction of . Taking the x (horizontal) axis. Rotating around the axis produces vertical motion. A wheel rotating around a horizontal axel (axis) rotates in the vertical plane.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search