Clever Geek Handbook

CSS transforms: rotation vs. rotateZ

I want to know what are the differences between css transforms functions rotate

and rotateZ

:

If I apply these properties (with the 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);
}
+3


source to share


1 answer


They do the same. rotateZ

stands for "rotate about the Z-axis" and the Z-axis points outward from your screen, basically giving it a third dimension.

You are using the same z-axis when you define a property called z-index

, which I'm sure you know about.



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

+2


source






More articles:


All Articles