Question

当我在translate3d和rotate3d的一个元素上使用transform时，该元素开始旋转。我想旋转时直线运动。

我在CSS中使用过Webkit动画

img{height:50px;
    width:50px;
    animation:tt;
    animation-duration:10s;
    position:relative;
    top:40vh;
    left:40vw;}




@keyframes tt
{  0%{  
      transform:rotate3d(0,0,0,0) translate3d(0,0,0);
     }



 50%{
      transform:rotate3d(0,0,1,2000deg) translate3d(300px,0,0);
     }
}

我希望它像汽车轮胎一样旋转，而不是像彗星或受激电子一样旋转

Answer 1

您可以使用left和right CSS属性，例如https://www.w3schools.com/css/css3_animations.asp上的类似示例

我已包含以下代码段： https://codepen.io/mohamedhmansour/pen/bOONQr

img {
  height: 50px;
  width: 50px;
  animation: tt;
  animation-duration: 5s;
  position: relative;
  top: 0;
  left: 0;
}

@keyframes tt {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }

  50% {
    transform: rotate(-360deg);
    left: 100%;
  }
  100% {
    transform: rotate(0deg);
    left: 0px;
  }
}

<div class="wrapper">
  <img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png" />
</div>

https://codepen.io/mohamedhmansour/pen/bOONQr

Answer 2

您没有定义100%状态，因此默认情况下它将是{@ {1}}（由于没有在元素上定义任何转换，因此是默认值），这会造成问题。您应该定义它，并通过保持相同的轴将元素保持在轨道上来使用更大的角度值：

transform:none

.img {
  height: 50px;
  width: 50px;
  animation: tt linear 10s;
  position: relative;
  top: 40vh;
  left: 40vw;
  background:red;
}

@keyframes tt {
  0% {
    transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate3d(0, 0, 1, 2000deg) translate3d(100px, 0, 0);
  }
  100% {
    transform: rotate3d(0, 0, 1, 4000deg) translate3d(100px, 0, 0);
  }

如果您想要线性动画，只需这样做（旋转前平移）即可：

<div class="img"></div>

.img {
  height: 50px;
  width: 50px;
  animation: tt linear 5s forwards;
  position: relative;
  top: 40vh;
  left: 40vw;
  background:red;
}

@keyframes tt {
  0% {
    transform: translateX(0) rotate(0);
  }

  100% {
    transform: translateX(100px) rotate(360deg);
  }

Answer 3

您可以尝试以下方法：

img{
  height: 50px;
  width: 50px;
  position: absolute;
  top:40vh;
  left:40vw;
  -webkit-animation: spinner 10s linear infinite;
  left: 0;
}
@-webkit-keyframes spinner{
  50%{
    -webkit-transform: rotate(1440deg);
    left: calc(100% - 200px);
  }
}

<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">

如何在使用CSS旋转时线性移动元素

3 个答案: