How do angles work in 3D rotation?

Question

As you know, for 3D transformations you need methods like rotateX(20deg) I know how to use both 2D and 3D transforms but what I can't understand is how angles work. I mean, if I have to rotate a div along X axis in clockwise direction (I don't even know if saying clockwise/anti-clockwise is right or wrong), I don't know whether to use +ve angle or -ve angle, until I try them individually to get the desired rotation.

Check the following example.

#wrapper {
  position: relative;
}
div[id^="d"] {
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 3em;
  text-align: center;
}
#d1 {
  background: red;
  top: 200px;
  left: 400px;
  transform: perspective(1000px) rotateY(70deg);
  transform-origin: right;
}
#d2 {
  background: blue;
  left: 600px;
  transform: perspective(1000px) rotateX(-70deg);
  transform-origin: bottom;
}
#d3 {
  background: purple;
  top: 200px;
  left: 800px;
  transform: perspective(1000px) rotateY(-70deg);
  transform-origin: left;
}
#d4 {
  background: grey;
  top: 200px;
  left: 600px;
}
#d5 {
  background: lightgreen;
  top: 400px;
  left: 600px;
  transform: perspective(1000px) rotateX(70deg);
  transform-origin: top;
}
#d6 {
  background: orange;
  top: 200px;
  left: 600px;
  z-index: 200;
}
    <div id="wrapper">
    <div id="d1">d1</div>
    <div id="d2">d2</div>
    <div id="d3">d3</div>
    <div id="d4">d4</div>
    <div id="d5">d5</div>
    <div id="d6">d6</div>
    </div>

I'm trying to make a cube. I'm sure I'll make it without any problem, anyhow. But if you see, d3 and d5 both have clockwise rotations (according to me), but one has +ve angle and other has -ve angle!

I don't understand this. How do I understand it?


Show source
| css   | css3   | rotation   | transform   2016-07-07 07:07 1 Answers

Answers to How do angles work in 3D rotation? ( 1 )

  1. 2016-07-07 12:07

    In the specs you can read:

    rotate() = rotate( <angle> )
    specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
    [w3.org]

    So a positive value means the element is rotated in the clockwise direction. Example:

    div{
      display:inline-block;
      padding:5px 10px;
      border:2px solid;
      text-align:center;
      margin:50px;
    }
    .plus{
      transform:rotate(30deg);
    }
    .min{
      transform:rotate(-30deg);
    }
    <div class="plus">positive</div>
    <div class="min">negative</div>

    If you need to define the rotation direction before you test it, you have to imagine the 3d [XYZ] coordinate system:

    3D coordinate system for CSS transforms

    The clockwise and anti-clockwise directions work when the arrow is pointing towards you. For your specific example with the 3d cube, you will see that #d3 and #d5 aren't rotating in the same direction. #d5 is rotating clockwise but #d3 isn't. If you "look up to it" with the Y axis arrow pointing towards you can see it is rotating anti-clockwise.

    Here is another example with a rotateY() and rotateX() transforms. rotateX() is positive (clockwise direction) and rotateY() is negative (anti-clockwise direction):

    div {
      display: inline-block;
      padding: 5px 10px;
      border: 2px solid;
      text-align: center;
      margin: 50px;
      transform: perspective(1000px) rotateX(30deg);
      transition: transform 2s;
    }
    div:hover {
      transform: perspective(1000px) rotateY(-60deg) rotateX(30deg);
    }
    <div>hover me</div>

Leave a reply to - How do angles work in 3D rotation?

◀ Go back