Javascript 可滚动div停止处理三维旋转

我有一个包含四个容器的页面，形状为一个立方体。当您单击“单击此处”按钮时，页面将按预期旋转，但动画完成后（仅在动画完成之前）无法滚动第2页或第4页，这是不需要的。下面是我正在使用的代码。关于如何让所有可滚动页面正常工作有什么想法吗

HTML：

<center><button type="button" class="btn btn-primary">Click Here</button></center>

<div class="cube-container">
    <div class="cube-card">
        <div class="container-main" id="Container-1">
            <div class="container">
                <div class="row-fluid">
                    <div class="span12">
                        <br>Page 1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
                    </div>
                </div>
            </div>
        </div>

        <div class="container-main" id="Container-2">
            <div class="container">
                <div class="row-fluid">
                    <div class="span12">
                        <br>Page 2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
                    </div>
                </div>
            </div>
        </div>

        <div class="container-main" id="Container-3">
            <div class="container">
                <div class="row-fluid">
                    <div class="span12">
                        <br>Page 3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
                    </div>
                </div>
            </div>
        </div>

        <div class="container-main" id="Container-4">
            <div class="container">
                <div class="row-fluid">
                    <div class="span12">
                        <br>Page 4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

var page = 1;

$(document).ready(function() {
    $(window).load(function() {
        var halfWidth = $(window).width() / 2;

        $("div#Container-1").css({webkitTransform: "rotateY(0deg) translateZ(" + halfWidth + "px)"});
        $("div#Container-2").css({webkitTransform: "rotateY(90deg) translateZ(" + halfWidth + "px)"});
        $("div#Container-3").css({webkitTransform: "rotateY(180deg) translateZ(" + halfWidth + "px)"});
        $("div#Container-4").css({webkitTransform: "rotateY(270deg) translateZ(" + halfWidth + "px)"});
    });

    $("button").click(function() {
        page = page + 1;

        var angle = -((page * 90) - 90);

        if (page == 5) {
            page = 1;
        }

        if (angle == -360) {
            angle = 0;
        }

        $("div.cube-card").css({webkitTransition: "-webkit-transform 0.60s"});
        $("div.cube-card").css({webkitTransform: "rotateY(" + angle + "deg)"});
    });
});

---

我明白了。透视值太小。测试将其设置为2000或更大，效果良好

更新

这在iOS 8发布时中断。为了让scroll在第二个页面（旋转90度的页面）上工作，我必须删除“-webkit overflow scrolling:touch；”至少它现在可以滚动了，但它非常不稳定。关于如何允许动量再次在此页面上滚动，有什么想法吗

var page = 1;

$(document).ready(function() {
    $(window).load(function() {
        var halfWidth = $(window).width() / 2;

        $("div#Container-1").css({webkitTransform: "rotateY(0deg) translateZ(" + halfWidth + "px)"});
        $("div#Container-2").css({webkitTransform: "rotateY(90deg) translateZ(" + halfWidth + "px)"});
        $("div#Container-3").css({webkitTransform: "rotateY(180deg) translateZ(" + halfWidth + "px)"});
        $("div#Container-4").css({webkitTransform: "rotateY(270deg) translateZ(" + halfWidth + "px)"});
    });

    $("button").click(function() {
        page = page + 1;

        var angle = -((page * 90) - 90);

        if (page == 5) {
            page = 1;
        }

        if (angle == -360) {
            angle = 0;
        }

        $("div.cube-card").css({webkitTransition: "-webkit-transform 0.60s"});
        $("div.cube-card").css({webkitTransform: "rotateY(" + angle + "deg)"});
    });
});