Question

我希望能够使用jQuery来旋转Div。我用纯CSS创建了效果 - 请参阅此处

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

Answer 2

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

Answer 3

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

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

使用jQuery旋转Div

3 个答案: