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 フリップも見ていきます。私が行ったことよりも簡単かもしれません。

于 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 に答える