可滚动的div停止在3D旋转上工作

我有一个包含四个容器的页面，它被塑造成一个立方体。当您点击“点击这里”按钮时，页面会按照预期旋转，但是只有在动画完成之后，您才能滚动页面或4，而不是在完成之前进行滚动。我正在使用的代码如下。关于如何让所有可滚动页面正常工作的任何想法？可滚动的div停止在3D旋转上工作

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

来源

2014-09-01 Whatevo

想通了这一点。透视值太小。测试将其设置为2000年，任何更大的，它工作得很好。

UPDATE

这打破了在iOS 8的发布若要滚动到第二页（也就是旋转90度的一个）上工作，我不得不删除“-webkit-溢出滚动：触摸;”至少它现在滚动，但它非常波涛汹涌。有关如何让动量再次滚动在此页面上的任何想法？

来源

2014-09-03 13:32:30 Whatevo

可滚动的div停止在3D旋转上工作

回答

相关问题