可滾動的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旋轉上工作

回答

相關問題