jquery - 使用 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

抱歉，我开始摆弄东西并弄清楚了如何做到这一点

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 Flip，它可能比我所做的更容易。