CSS 变换：旋转与旋转 Z

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 表示 'rotate about the Z axis'，并且 Z 轴从屏幕指向外部，基本上是给它一个三维空间。

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

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

CSS 变换：旋转与旋转 Z

CSS transforms: rotate vs rotateZ

css

css-transforms