javascript - 使 css3 过渡始终沿同一方向旋转

Question

我试图让一个正面/背面 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; 
  }

当用户点击它时，我将类“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);
  }

我应该只增加旋转 Angular 吗？还有其他想法吗？

这是 fiddle 中的当前状态和完整的 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>