1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Isometric Truck Animation</title>
7 <style>
8 /* Global Styles */
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14 body {
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 height: 100vh;
19 background-color: #ADD8E6; /* Light blue background */
20 overflow: hidden;
21 }
22 .scene {
23 position: relative;
24 width: 200px;
25 height: 200px;
26 perspective: 1000px;
27 }
28 .road {
29 position: absolute;
30 width: 100%;
31 height: 20px;
32 background-color: #808080; /* Gray road */
33 transform: rotateX(45deg);
34 }
35 .truck {
36 position: absolute;
37 width: 20px;
38 height: 20px;
39 background-color: #FF0000; /* Red truck */
40 transform: translateX(0) rotateX(45deg);
41 animation: drive 8s linear infinite;
42 }
43 .truck::before {
44 content: '';
45 position: absolute;
46 top: 5px;
47 left: 5px;
48 width: 10px;
49 height: 10px;
50 background-color: white;
51 }
52 @keyframes drive {
53 0% {
54 transform: translateX(-75px) rotateX(45deg);
55 }
56 100% {
57 transform: translateX(75px) rotateX(45deg);
58 }
59 }
60 </style>
61</head>
62<body>
63 <div class="scene">
64 <div class="road"></div>
65 <div class="truck"></div>
66 </div>
67</body>
68</html>