Search code examples
htmlcsscss-transforms

CSS transforms: rotate vs rotateZ

I want to know what are the differences between the css transform functions rotate and rotateZ:

If I applied those properties (with same values) to two different elements I get the same results:

.rotateZ {
  transform: rotateZ(180deg);
}

.rotate {
  transform: rotate(180deg);
}
<div class="rotateZ">
  <img src="http://ohdoylerules.com/content/images/css3.svg" />
  <h3>RotateZ</h3>
</div>

<div class="rotate">
  <img src="http://ohdoylerules.com/content/images/css3.svg" />
  <h3>Rotate</h3>
</div>

Solution

  • They do the exact same thing. rotateZ means 'rotate about the Z axis', and the Z axis points outwards from your screen, basically giving it a third dimension.

    You use the same z-axis when you define a property called the z-index, which I'm sure you know about.

    Source: http://www.w3.org/TR/css3-transforms/#funcdef-rotatez