div在具有transform属性的div中不能滚动

Question

http://jsfiddle.net/o802wv9q/

#d1 {
    position:absolute;
    width:100px; height:100px;
    background:red;
    transform: rotateY(1deg);
    -webkit-transform: rotateY(1deg);
    -moz-transform: rotateY(1deg);
    -o-transform: rotateY(1deg);
}
#d2 {
    position:absolute;
    width:90px; height:90px;
    background:green;
    overflow:auto;
}
#d3 {
    width:50px; height:500px;
    background:blue;
}

<div id="d1"></div>
<div id="d2">
    <div id="d3"></div>
</div>

将鼠标移动到蓝色块并滚动，绿色块不滚动，移动到绿色块并滚动，它没问题。我删除了转换css属性，并在蓝色块中滚动，运行良好。我在测试铬。发生什么事？

Answer 1

transform正在改变堆叠索引，为了纠正这个问题，您还需要在z轴上进行转换：

Demo Fiddle

transform: rotateY(1deg)  translateZ(-1px);
-webkit-transform: rotateY(1deg)  translateZ(-1px);
-moz-transform: rotateY(1deg)  translateZ(-1px);
-o-transform: rotateY(1deg)  translateZ(-1px);