同時旋轉兩個div

Question

我正在嘗試旋轉兩個 div，我有兩個 div，第一個是網格 div(div1)，第二個是內容 div (div2)，現在我正在嘗試同時旋轉兩個 div，例如在用戶 propectus 中看到一個頁面旋轉即頁面前部區域（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 標簽，如 $('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);
    }
});