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

当我对一个元素使用transform进行translate3d和rotate3d时，元素开始环绕。我想要旋转时的线性运动

我在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);
     }
}

---

我想让它向前移动，同时像汽车轮胎一样旋转，而不是像彗星或受激电子那样旋转。你没有定义

100%

状态，因此默认情况下，它将是a

转换：无

（默认值，因为元素上没有定义转换），这会产生问题。您应该定义它，并通过保持相同的轴来使用更大的角度值，以使图元保持在轨道上：

.img{
高度：50px；
宽度：50px；
动画：tt线性10秒；
位置：相对位置；
顶部：40vh；
左：40vw；
背景：红色；
}
@关键帧tt{
0% {
变换：旋转3d（0,0,0,0）平移3d（0,0,0）；
}
50% {
变换：旋转3d（0,0,12000deg）平移3d（100px，0,0）；
}
100% {
变换：旋转3d（0,0,1,4000度）平移3d（100像素，0,0）；
}

---

您可以使用

左

和

右

CSS属性，类似于

我已经包括了下面的片段：

img{
高度：50px；
宽度：50px；
动画：tt；
动画持续时间：5s；
位置：相对位置；
排名：0；
左：0；
}
@关键帧tt{
0% {
变换：旋转（0度）；
左：0px；
}
50% {
变换：旋转（-360度）；
左：100%；
}
100% {
变换：旋转（0度）；
左：0px；
}
}

您可以尝试以下方法：

img{
高度：50px；
宽度：50px；
位置：绝对位置；
顶部：40vh；
左：40vw；
-webkit动画：微调器10s线性无限；
左：0；
}
@-webkit关键帧微调器{
50%{
-webkit变换：旋转（1440度）；
左：计算（100%-200px）；
}
}