How to move an element linearly while rotating with css - html

Question

When i use transform on one element for translate3d and rotate3d then the element starts to orbit. i want linear motion while rotating.
i have used webkit animations in css
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);
}
}
i wanted it move forward while rotating like a cars tire instead its like a comet or excited electron

Answer 1

You could use the left and right CSS properties, similar example on https://www.w3schools.com/css/css3_animations.asp
I have included the snippet below:
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

You didn't define the 100% state so by default it will be the a transform:none (the default value since no transform is defined on the element) which is creating the issue. You should define it and use a bigger value for the angle by keeping the same axis to keep your element on the orbit:
.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>
And if you want a linear animation simply do like this (translation before rotation):
.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

You can try this:
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">