使css3過渡始終沿相同方向旋轉

Question

我正在嘗試使前/后div始終沿相同方向翻轉。 我使用css和javascript實現了翻頁功能，但是我很難考慮如何使其始終向右旋轉，而不是向右旋轉然后回到左側。

我基本上將div與以下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; 
  }

當用戶單擊它時，我將“ flipped”類添加到div中，從而將css更改為：

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

Answer 1

我不認為可以通過轉換來完成。 也許您可以使用關鍵幀來做到這一點。 類似的代碼：

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