为什么伪元素：before和：after出现在我的DIV元素前面而不是后面？

Question

我有一个给定类的DIV元素：

.slideshow { background: white; width: 700px; height: 300px; padding:10px; margin: 0 auto; position: relative; box-shadow: 0px 0px 5px grey, 0px 10px 20px rgba(0,0,0,.1) inset; }

我定义了这两个伪元素（：之前和：之后）：

.slideshow:before, .slideshow:after { content: " "; background: green; width: 50%; height: 50%; position: absolute; z-index: -10; }

我的问题是这两个伪元素出现在我的DIV前面而不是后面。这种行为有什么具体原因吗？

以下是一个示例：EXAMPLE

Javascript部分有点乱，但我还在努力。

另外我注意到如果我删除所有JS部分我不再有这个问题，但我认为代码中没有任何内容可以修改幻灯片 DIV

Answer 1

已解决：问题出在我所拥有的javascript部分：

$('.slideshow').css('-webkit-transform', 'rotate(0deg)');

删除此行解决了我的问题。

我猜伪元素：之前和：之后与属性转换不是100％兼容。