8

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

私は基本的に次のcssでdivを使用します

  /* 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; 
  }

ユーザーがそれをクリックすると、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);
  }

常に回転角度をインクリメントする必要がありますか? 他のアイデアはありますか？

これが現在のステータスとフィドルの完全なcssです

4

1 に答える 1

4

私はそれが変換でできるとは思わない。キーフレームでそれを行うことができます。同様のコード:

@-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>

于 2013-01-11T22:29:46.590 に答える