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

当用户点击它时，我将“翻转”类添加到 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

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 回答