CSS transform visibility in Chrome

Question

I'm trying to make a paper stack effect with pseudo elements.The CSS code is:

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

I've read that transform requires display:block . With this code the transformation isn't visible although the developer tools highlight the :before and :after elements. when i add z-index:2 on the #content element the stack is visible but the :after element is on top which has z-index: -1 . I guess it has to do with the .body .Is there a way to make this work? here is the fiddle: http://jsfiddle.net/KVsjK/4/

Answer 1

Moving the z-index from #content to .container in your jsFiddle example seems to make it display correctly. jsfiddle

Check out the second answer (with 74+ votes) on this similar question: Is it possible to set the stacking order of pseudo-elements below their parent element?

Important quote to note:

The actual answer to this question is that you need to create a new stacking context on the parent of the element with the pseudo element (and you actually have to give it a z-index, not just a position).

Some further reading here at MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Answer 2

Not sure if this is your whole problem, but you need to add content: '' to your :before and :after elements.