CSS變換在Chrome

Question

的知名度，我試圖與僞elements.The CSS代碼中的紙堆效果是：

.body{background-color: #F5F5F5; height:100%;}  
#content { 
     ... 
     position: relative; 
    ... 
    display: block; 
} 
#content:after, 
#content:before { 
    display: block; 
    height: 100%; 
    left: -1px; 
    position: absolute; 
    width: 100%; 
} 
#content:after { 
    -webkit-transform: rotate(2deg); 
    -moz-transform: rotate(2deg); 
    -ms-transform: rotate(2deg); 
    -o-transform: rotate(2deg); 
    transform: rotate(2deg); 
    top: 0; 
    z-index: -1; 
} 
#content:before { 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
    top: 0; 
    z-index: -2; 
} 

我讀過的變換需要顯示：塊。使用此代碼，雖然開發人員工具突出顯示：之前和：之後元素，轉換不可見。當我添加z-index：2在＃內容元素堆棧是可見的，但：後：元素在頂部有z-index：-1。我想這跟.body有關。有沒有辦法讓這項工作成功？這裏是fiddle: http://jsfiddle.net/KVsjK/4/

Answer 1

將您的jsFiddle示例中的z-index從#content移至.container似乎使其正確顯示。 jsfiddle

這個類似的問題時退房第二個答案（帶票74+）：Is it possible to set the stacking order of pseudo-elements below their parent element?

重要的報價要注意：

實際這個問題的答案是，你需要創建一個使用僞元素在元素的父元素上創建新的堆棧上下文（並且實際上必須爲其賦予z-index，而不僅僅是一個位置）。

一些進一步的閱讀在這裏MDN：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Answer 2

不知道這是否是您的整個問題，但您需要將content: ''添加到:before和:after元素。