使用jQuery旋轉Div

Question

我希望能夠使用jQuery旋轉Div。我已創建了純CSS效果 - 在這裏看到

http://jsfiddle.net/9twvF/

<div class="clientcontainer"> 
    <div class="clientcard hl"> 
     <div class="front face">Front Panel</div> 
     <div class="back face center">Back Panel</div> 
    </div> 
</div> 


.clientcontainer { 
    position: relative; 
    display: inline-block; 
    width: 240px; 
    height: 240px; 
} 


.clientcontainer { 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    -o-perspective: 1000px; 
    -ms-perspective: 1000px; 
    perspective: 1000px; 
} 

.clientcard { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 0.5s linear; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: all 0.5s linear; 
    -o-transform-style: preserve-3d; 
    -o-transition: all 0.5s linear; 
    transform-style: preserve-3d; 
    transition: all 0.5s linear; 
    -ms-transform-style: preserve-3d; 
    -ms-transition: all 0.5s linear; 
} 

.clientcontainer:hover .hl, .clientcontainer.hover_effect .hl { 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
} 

.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden; 
    background-color: yellow; 
    font-weight: bold; 
} 

.face.back { 
    display: block; 
    -webkit-transform: rotateY(180deg); 
    -webkit-box-sizing: border-box; 
    -moz-transform: rotateY(180deg); 
    -moz-box-sizing: border-box; 
    -o-transform: rotateY(180deg); 
    -o-box-sizing: border-box; 
    -ms-transform: rotateY(180deg); 
    -ms-box-sizing: border-box; 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    text-align: center; 
    background-color: green; 
    border: 1px solid #666; 
} 

，而不是使用CSS和它的工作在懸停不過。我希望jQuery能夠以相同的效果對div進行動畫製作，但只需點擊一下按鈕即可。

任何想法？

謝謝！

Answer 1

嘗試jQuery Flippy。我認爲它應該可以幫助你實現你想要的。

Answer 2

對不起，我開始玩的東西，並制定出如何做到這一點

http://jsfiddle.net/9twvF/5/

<div class="clientcontainer"> 
    <div class="clientcard hl"> 
     <div class="front face">Front Panel</div> 
     <div class="back face center">Back Panel</div> 
    </div> 
</div> 

<a href="#" id="rotate">rotate</a> 


.clientcontainer { 
    position: relative; 
    display: inline-block; 
    width: 240px; 
    height: 240px; 
} 


.clientcontainer { 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    -o-perspective: 1000px; 
    -ms-perspective: 1000px; 
    perspective: 1000px; 
} 

.clientcard { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 0.5s linear; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: all 0.5s linear; 
    -o-transform-style: preserve-3d; 
    -o-transition: all 0.5s linear; 
    transform-style: preserve-3d; 
    transition: all 0.5s linear; 
    -ms-transform-style: preserve-3d; 
    -ms-transition: all 0.5s linear; 
} 

.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden; 
    background-color: yellow; 
    font-weight: bold; 
} 

.face.back { 
    display: block; 
    -webkit-transform: rotateY(180deg); 
    -webkit-box-sizing: border-box; 
    -moz-transform: rotateY(180deg); 
    -moz-box-sizing: border-box; 
    -o-transform: rotateY(180deg); 
    -o-box-sizing: border-box; 
    -ms-transform: rotateY(180deg); 
    -ms-box-sizing: border-box; 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    text-align: center; 
    background-color: green; 
    border: 1px solid #666; 
} 

$("#rotate").click(function() { 
    $(".clientcard").css({ 
    '-webkit-transform' : 'rotateY(-180deg)', 
    '-moz-transform' : 'rotateY(-180deg)', 
     '-ms-transform' : 'rotateY(-180deg)', 
     '-o-transform' : 'rotateY(-180deg)', 
      'transform' : 'rotateY(-180deg)' 
    }); 
}); 

萬一有人想答案。我也會看jQuery的翻轉，這可能比我所做的更容易。

Answer 3

只要連接div點擊事件的CSS樣式更改shoudl做的伎倆。

$("div.button").click(function() { 
    $("div.background").css('-webkit-transform', 'rotateY(-190deg)') 
});