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

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

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

以下是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>

使css3过渡始终在同一方向旋转

1 个答案: