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