同時旋轉兩個div

Question

我想旋轉兩個div，我有兩個div第一個是網格div（div1），第二個是內容div（div2），現在我試圖同時旋轉兩個div， 例如在用戶看來，像一個頁面旋轉即頁面前部區域（div 1）前後區域（div 2）出現在前面但帶有動畫，我不會不知道如何我會這樣做，請任何人幫助我在此，

我試着這個，但沒有幫助我它不斷旋轉。

小提琴Here

Answer 1

試試這個出來！
要在其旋轉與內容的div
http://jsfiddle.net/lakario/VPjX9/

$('#go').click(function() { 
    var page1 = $('.page1'); 
    var page2 = $('.page2'); 
    var toHide = page1.is(':visible') ? page1 : page2; 
    var toShow = page2.is(':visible') ? page1 : page2; 

    toHide.removeClass('flip in').addClass('flip out').hide(); 
    toShow.removeClass('flip out').addClass('flip in').show(); 
}); 

Answer 2

嘗試了這一點！它一定會工作！
HTML內容

<button type="button" id="go">FLIP</button> 
<div class="container"> 
    <div class="page1"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod mauris metus, ac consectetur felis. Cras consectetur, est vel malesuada faucibus, ligula enim suscipit elit, ut ornare quam urna quis felis. In hac habitasse platea dictumst. 
    </div> 
    <div class="page2"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum, odio vel condimentum varius, nibh nunc ultrices velit, vestibulum consequat arcu libero eget nibh. Integer sed nibh velit. 
    </div> 
</div> 

JS內容

$('#go').click(function() { 
    var page1 = $('.page1'); 
    var page2 = $('.page2'); 
    var toHide = page1.is(':visible') ? page1 : page2; 
    var toShow = page2.is(':visible') ? page1 : page2; 

    toHide.removeClass('flip in').addClass('flip out').hide(); 
    toShow.removeClass('flip out').addClass('flip in').show(); 
}); 

CSS內容

.page1,.page2 { 
    color: white; 
    padding: 10px;  
} 
/* end */ 

.container { 
    position: absolute; 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
} 

.page1 { 
    width: 300px; 
    height: 300px; 
    background: red; 
    position: relative; 
} 

.page2 { 
    width: 300px; 
    height: 300px; 
    background: blue; 
    position: relative; 
    display: none; 
} 

.flip { 
    -webkit-backface-visibility:hidden; 
    -webkit-transform:translateX(0); 
    -moz-backface-visibility:hidden; 
    -moz-transform:translateX(0); 
} 
.flip.out { 
    -webkit-transform: rotateY(-90deg) scale(.9); 
    -webkit-animation-name: flipouttoleft; 
    -webkit-animation-duration: 175ms; 
    -moz-transform: rotateY(-90deg) scale(.9); 
    -moz-animation-name: flipouttoleft; 
    -moz-animation-duration: 175ms; 
} 
.flip.in { 
    -webkit-animation-name: flipintoright; 
    -webkit-animation-duration: 225ms; 
    -moz-animation-name: flipintoright; 
    -moz-animation-duration: 225ms; 
} 
.flip.out.reverse { 
    -webkit-transform: rotateY(90deg) scale(.9); 
    -webkit-animation-name: flipouttoright; 
    -moz-transform: rotateY(90deg) scale(.9); 
    -moz-animation-name: flipouttoright; 
} 
.flip.in.reverse { 
    -webkit-animation-name: flipintoleft; 
    -moz-animation-name: flipintoleft; 
} 
@-webkit-keyframes flipouttoleft { 
    from { -webkit-transform: rotateY(0); } 
    to { -webkit-transform: rotateY(-90deg) scale(.9); } 
} 
@-moz-keyframes flipouttoleft { 
    from { -moz-transform: rotateY(0); } 
    to { -moz-transform: rotateY(-90deg) scale(.9); } 
} 
@-webkit-keyframes flipouttoright { 
    from { -webkit-transform: rotateY(0) ; } 
    to { -webkit-transform: rotateY(90deg) scale(.9); } 
} 
@-moz-keyframes flipouttoright { 
    from { -moz-transform: rotateY(0); } 
    to { -moz-transform: rotateY(90deg) scale(.9); } 
} 
@-webkit-keyframes flipintoleft { 
    from { -webkit-transform: rotateY(-90deg) scale(.9); } 
    to { -webkit-transform: rotateY(0); } 
} 
@-moz-keyframes flipintoleft { 
    from { -moz-transform: rotateY(-90deg) scale(.9); } 
    to { -moz-transform: rotateY(0); } 
} 
@-webkit-keyframes flipintoright { 
    from { -webkit-transform: rotateY(90deg) scale(.9); } 
    to { -webkit-transform: rotateY(0); } 
} 
@-moz-keyframes flipintoright { 
    from { -moz-transform: rotateY(90deg) scale(.9); } 
    to { -moz-transform: rotateY(0); } 
} 

Answer 3

我更新了你的代碼，它的工作，按您的需求。 http://jsfiddle.net/R6fzF/437/

你的代碼有一些錯誤。首先是你沒有關閉div標籤。 div應該結束。 在你的javascript代碼中，你正在選擇單獨的div。更好的方式將分配一個共同的類，然後使用類選擇器如：$（「 common_class‘），或者你也可以使用div標籤中選擇像$（’格」）

$(function() { 
    var $elie = $("div"); 
    rotate(90); 
    function rotate(degree) {   
     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});      
     timer = setTimeout(function() { 
      rotate(++degree); 
     },5); 
    } 
});