1

我希望能够使用 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 设置动画，但它可以通过单击按钮来实现。

有任何想法吗？

谢谢！

4

3 回答 3

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

于 2013-04-15T20:30:14.090 回答
0

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

于 2013-04-15T20:23:14.450 回答
0

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

 $("div.button").click( function() {
     $("div.background").css('-webkit-transform', 'rotateY(-190deg)')
 });
于 2013-04-15T20:31:41.457 回答