使用jQuery旋转Div

时间:2013-04-15 20:17:30

标签: jquery html jquery-animate animate.css

我希望能够使用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设置动画,但只需点击一下按钮即可。

有什么想法吗?

谢谢!

3 个答案:

答案 0 :(得分: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翻转,它可能比我做的更容易。

答案 1 :(得分:0)

尝试jQuery Flippy。我认为它应该可以帮助你实现你想要的目标。

答案 2 :(得分:0)

只需将div click事件连接到css样式更改就可以了。

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