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

CSS转换：rotate vs rotateZ

1 个答案: