Question

我有一个页面有四个容器，形状为立方体。当您单击“单击此处”按钮时，页面将按预期旋转，但一旦动画完成，您无法在完成之前滚动页面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>

CSS：

div.cube-container {
    perspective: 320;
    perspective-origin: 50% 200px;
    transform: scale(1);
    margin-top: 25px;
}

div.cube-card {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    z-index: 1;
}

div.container-main {
    width: 100%;
    height: 200px;
    border: 1px solid #bbb;
    background-color: #e0e4e5;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

div.container {
    position: relative;
}

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)"});
    });
});

Answer 1

想出来了。透视值太小。经测试将其设置为2000以及更大的任何值，并且工作正常。

<强>更新

这打破了iOS 8的发布。要在第二页（旋转90度）上滚动工作，我不得不删除“-webkit-overflow-scrolling：touch;”至少它现在滚动，但它非常不稳定。关于如何让动量再次在这个页面滚动的任何想法？

可滚动div停止3D旋转

1 个答案: