CSS transforms: rotate vs rotateZ

Question

I want to know which are the differences between the css transforms functions rotate and rotateZ:

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

HTML

<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>

CSS

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

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

Answer 1

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