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

Posted 2023-03-06

【中文标题】使css3过渡始终沿同一方向旋转

【英文标题】：make css3 transition rotate always in the same direction

【发布时间】：2012-12-22 13:05:17

【问题描述】：

我试图让前/后 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

【问题讨论】：

jsfiddle.net/7WgKL/2

***.com/questions/2584138/… 看到了吗？

嗨，Alex，没有见过这个，但这并不能真正回答我的问题。问题是当我从 180 度回到 0 度时，它会改变旋转方向。

这在使用转换时很常见，您只需将值设为负数，它就会朝着您期望的方向前进。

【参考方案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>

【讨论】：

不需要使用动画，确实可以通过转场来完成。当必须处理更复杂的时间问题时，动画很有用。在这种只有起点和终点的简单情况下，过渡将是最有效的方式。此外，如果尝试多次单击以触发动画，这将中断（我认为）（我怀疑 OP 从悬停示例中复制了代码）。这个答案确实对动画有一个有趣的用途，但我认为这是解决其他问题的有用技巧。

@thisiate 是的，当然可以检查当前的变换旋转并始终增加它。在我的回答中，我假设 OP 想要的固定样式。无论如何，好点。

@vals 看起来确实如此。但这有点棘手，因为您的变量最终会换行（即使浮点数如此之大，它实际上也不会发生）。应该有更清洁的方法，但我还没有找到。

@nerdistcolony 我添加了另一个可能性。但是在转换中间改变状态时它也会失败..