CODEWITHSUNDEEP
htmlcss
ValAsta
ValAsta

Reputation: 57

How to move an element linearly while rotating with css

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

Upvotes: 1

Views: 577

Answers (3)

Partho63
Partho63

Reputation: 3117

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

Upvotes: 0

Mohamed Mansour
Mohamed Mansour

Reputation: 40149

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

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272590

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>

Upvotes: 0

Related Questions