Question 382581 in CSS Question posted in
Some basic documentation can be found here.

Css – How can i move this car (along with wheels) through X axis when clicking forward and backward button

This is my code :

  <body>
    <div class="backgroundImg">
      <!-- <video autoplay loop muted>
      <source src="video.mp4" type="video/mp4">
    </video> -->
      <img src="Scene.jpg" alt="" />
    </div>
    <div class="buttons">
      <button class="forward"></button>
      <button class="backward"></button>
    </div>
    <div class="road"></div>
    <div class="wholecar">
      <div class="car"></div>
      <div class="wheel1">
        <img src="wheel1.png" alt="" />
      </div>
      <div class="wheel2">
        <img src="wheel2.png" alt="" />
      </div>
    </div>
    <script src="app.js"></script>
  </body>

This is my CSS code:

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
/* CAR */

.car {
  height: 309px;
  width: 552px;
  background-image: url(carfinal.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: 408px;
  top: 585px;
  z-index: 2;
  animation: CarMoves 1.5s linear infinite;
}

/* FRONT WHEEL */

.wheel1 img {
  width: 122px;
  position: absolute;
  top: 770px;
  left: 805px;
  animation: none;
  z-index: 3;
}
.wheel1 img.play-forward {
  animation: WheelRotate 0.5s linear infinite;
}
.wheel1 img.play-backward {
  animation: WheelRotate 0.5s linear infinite reverse;
}

/* BACK WHEEL */

.wheel2 img {
  width: 122px;
  position: absolute;
  top: 770px;
  left: 492px;
  animation: none;
  z-index: 3;
}
.wheel2 img.play-forward {
  animation: WheelRotate 0.5s linear infinite;
}
.wheel2 img.play-backward {
  animation: WheelRotate 0.5s linear infinite reverse;
}

/* CAR BODY WITH WHEELS */

/* .wholecar .car{
  z-index: 4;
  left:100px
}
.wholecar .wheel1 img{
  left: 500px;
}
.wholecar .wheel2 img{
  left: 185px;
} */

/* BUTTONS */

.buttons {
  display: flex;
  justify-content: center;
}
.forward {
  height: 80px;
  background-image: url(right.jpg);
  background-size: cover;
  width: 90px;
  border-radius: 10px;
  border: 1.5px solid red;
  position: absolute;
  top: 10vh;
  left: 105vh;
}
.backward {
  height: 80px;
  width: 90px;
  position: absolute;
  border-radius: 10px;
  border: 1.5px solid red;
  background-image: url(left.jpg);
  background-size: cover;
  top: 10vh;
  left: 80vh;
}

/* ANIMATIONS */

@keyframes WheelRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

I have an HTML file with a structure that includes a background image or video, buttons for moving forward and backward, a road element, a car, and two wheels. The car and wheels have their own CSS styling and animations.

In my JavaScript code, I’ve added event listeners to the forward and backward buttons. When these buttons are clicked, corresponding CSS classes are toggled on the road, background image, and wheels to initiate animations.

However, I’m encountering an issue where the wheels aren’t moving along with the car when it moves forward or backward.

To address this, I’ve attempted to use the translate property on the .wholecar class to move the entire car along with its wheels. However, this approach didn’t work as expected.

I’m seeking assistance in resolving this issue so that when the forward or backward buttons are clicked, not only the background and road animate, but the car and its wheels move accordingly to create a realistic driving animation.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I did it using setInterval() and clearInterval()

    function moveCar() { 
const step = 2; 
const currentLeft = parseFloat(getComputedStyle(car).left); 
const newLeft = currentLeft + moveDirection * step; 
car.style.left = newLeft + "px";
}

    but i had to write 3 different functions for wheel1,wheel2 and car. but moving left gradually solved my problem. :)


  2. 0

    Stacking up different linear transformation might not preserve colinearity (keeping objects out of the line) like the combination of rotation and translation in your case.

    I believe the easiest solution would be dynamically changing left and top properties in your javascript file instead of translating.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search