css 为什么旋转变换在动画中的工作方式不同？

0yg35tkg 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(162)

在这段代码中，当沿着左上角的点旋转时，条向下摆动了一点，旋转时多次看到这种情况，有时它会得到修复，但我不能发现差异。

@keyframes rightup{
  100%{
    transition:transform 1s linear;
    transform-origin:top left;
    transform:rotate(-50deg); 
  }
}

.box{
  position:absolute;
  height:10px;
  width:150px;
  background-color:black;
  top:50%;
  left:50%;
  border-radius:5px;
  animation-name:rightup;
  animation-duration:5s;
}

<div class="box"></div>

想要这样的东西

.box{
  position:absolute;
  height:10px;
  width:150px;
  background-color:black;
  top:50%;
  left:50%;
  border-radius:5px;
  animation-name:rightup;
  animation-duration:5s;
}
.box:hover{
  transition:transform 1s linear;
    transform-origin:top left;
    transform:rotate(-50deg); 
}
<div class="box"></div>

css

来源：https://stackoverflow.com/questions/75138606/why-does-rotate-transition-work-differently-in-animation

1条答案

按热度按时间

gfttwv5a1#

在动画中，您不会从一开始就将变换原点设置为左上右，但在变换/变换示例中会这样做。
此外，一个次要的点，为这样一个细长的酒吧，但它作出了轻微的差异，你是旋转约顶部的酒吧，而不是（垂直）中心。
此代码段更改了以下两个方面：

@keyframes rightup {
  0% {
    transform-origin: center left;
  }
  100% {
    transform-origin: center left;
    transform: rotate(-50deg);
  }
}

.box {
  position: absolute;
  height: 10px;
  width: 150px;
  background-color: black;
  top: 50%;
  left: 50%;
  border-radius: 5px;
  animation-name: rightup;
  animation-duration: 5s;
}

<div class="box"></div>

赞(0）回复(0）举报 2023-01-18

我来回答

css 为什么旋转变换在动画中的工作方式不同？

1条答案

相关问题

热门标签

最新问答