css3トランジションを常に同じ方向に回転させます

Question

フロントとバックのdivを常に同じ方向に反転させようとしています。私はCSSとJavaScriptでフリップを実装しましたが、右に回転させてから左に戻すのではなく、常に回転させる方法を考えるのは苦労します。

私は基本的にfollwing CSS

/* flip speed goes here */ 
    .flipper { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 

    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 

    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 

    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 5px; 
    margin-left: 3px; 
    z-index: 3; 
    width: 160px; 
    height: 145px; 
    display:block; 
    } 

でのdivを使用して、ユーザーがそれをクリックしたとき、私はクラスを追加し、このCSSを変更するDIVに「裏返し」：

 /* flip the pane when hovered */ 
    .flip-container.flipped .flipper { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    } 

私はちょうど回転角度を増やすべきですか？他のアイデア？ここで

は、私はそれを変換して行うことができることはないと思う現状とfiddle

Answer 1

で完全なCSSです。 キーフレームを使ってもかまいません。同様のコード：

@-webkit-keyframes rotate1 { 
    from {-webkit-transform: rotate(0deg)} 
    to {-webkit-transform: rotate(180deg)} 
} 
@-webkit-keyframes rotate2 { 
    from {-webkit-transform: rotate(180deg)} 
    to {-webkit-transform: rotate(360deg)} 
} 

#rotable { 
    background-color: red; 
    -webkit-animation-name: rotate2; 
    -webkit-animation-duration: 3s; 
    -webkit-transform: rotate(180deg); 
} 

#rotable:hover { 
    background-color: yellow; 
    -webkit-animation-name: rotate1; 
    -webkit-animation-duration: 3s; 
} 

あなたが欲しいものと同様のことをします。回転方向は常に同じであることに注意してください。

別働か、（遷移が反対方向に行くと変化のために...）遷移アニメーションを混合

.container { 
 
    perspective: 500px; 
 
} 
 

 
.test { 
 
    transform: rotate(360deg); 
 
    transition: transform 4s; 
 
} 
 

 
.container:hover .test { 
 
    transform: rotateY(180deg); 
 
    animation: turn 4s; 
 
} 
 

 
@keyframes turn { 
 
    from {transform: rotate(0deg);} 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.test { 
 
    background-color: lightblue; 
 

 
}

<div class="container"> 
 
<div class="test">TEST</div> 
 
</div>