CSS 变换：rotate vs rotateZ

【问题标题】：CSS transforms: rotate vs rotateZCSS 变换：rotate vs rotateZ
【发布时间】：2016-02-04 02:03:01
【问题描述】：

我想知道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);
}

【问题讨论】：

标签： css css-transforms

【解决方案1】：

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

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

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

【讨论】：

完全相同，但有一个警告：Internet Explorer 9 不支持 CSS3 3D 变换，因此不支持 rotateZ - 仅支持 rotate。 JSFiddle - open in IE9