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

Question

当我在一个元素上对 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);
     }
}

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

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%状态，因此默认情况下它将是 a 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); }

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

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">