css - 変換の回転 () が正しく機能しない

Question

css transform: rotate() が機能しない理由がわかりません。コードは次のとおりです。http://jsbin.com/afayan/1/edit クラス「コンテンツ」に背景色を設定すると、変換が機能しません...

Answer 1

両方のコンテンツに適切な z-index を追加する必要があります。または、z-index を削除します。

更新しました：

コード

Answer 2

これはz-indexについてです。これを試して：

.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); }