CSS 转换 : rotate vs rotateZ

Question

我想知道 css 转换函数 rotate 和 rotateZ 之间的区别:

如果我将这些属性(具有相同的值)应用于两个不同的元素，我会得到相同的结果:

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

他们做同样的事情。 rotateZ 的意思是“绕 Z 轴旋转”，Z 轴从屏幕向外指向，基本上是给它一个三维空间。

您在定义名为 z-index 的属性时使用相同的 z 轴，我相信您知道这一点。

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