CSS转换：rotate vs rotationZ

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轴z-index，我确定您知道。

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