变换旋转（）无法正常工作答案

【问题标题】：Transform rotate() not working correctly变换旋转（）无法正常工作
【发布时间】：2014-03-05 08:34:07
【问题描述】：

我无法弄清楚为什么 css 转换：rotate() 不起作用。这是代码：http://jsbin.com/afayan/1/edit 当我将背景颜色添加到“内容”类时，转换不起作用...

【问题讨论】：

在 Chrome 中为我工作...和 FF...和 safari... 但在 IE9 中不起作用。这是你的问题吗？
因为z-index:-1而无法使用，你真的需要吗？
-ms- 在 IE9 中工作的代码中缺失。

标签： css css-transforms

【解决方案1】：

您必须为这两个内容添加正确的 z-index。或者删除 z-index。

更新：

Code

【讨论】：

但是当我这样做的时候，红色的 div 最先出现 - 我希望它在后面 - 只是在角落里看到它。
没问题。我更改了答案中的代码，因此如果您对此感到满意，请接受它。 :)

【解决方案2】：

这是关于 z 索引的。试试这个：

.content { padding:50px; background: green; z-index: 5; }
.box { background:#ccc; padding:50px; position:relative;}
.box:after { content:''; width:100%; height:100%; left:0; top:0; 
             background:red; position:absolute; z-index:4; 
             -moz-transform: rotate(2deg); transform: rotate(2deg); 
             -webkit-transform: rotate(2deg); }

【讨论】：

这就是为什么我将 z-index 与 -1 一起使用，将其放在后面，并且仅在我没有背景时才有效。但我想有一个背景......