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>3D Animation</title>
7 <style>
8 body {
9 margin: 0;
10 background-color: #fff;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 height: 100vh;
15 overflow: hidden;
16 }
17 #box {
18 position: relative;
19 width: 100px;
20 height: 200px;
21 transform-style: preserve-3d;
22 transform: rotateX(0deg) rotateY(0deg);
23 }
24 .face {
25 position: absolute;
26 width: 100%;
27 height: 100%;
28 backface-visibility: hidden;
29 }
30 .front {
31 transform: translateZ(50px);
32 background-color: #808080;
33 }
34 .back {
35 transform: rotateY(180deg) translateZ(50px);
36 background-color: #808080;
37 }
38 .left {
39 transform: rotateY(-90deg) translateZ(50px);
40 background-color: #808080;
41 }
42 .right {
43 transform: rotateY(90deg) translateZ(50px);
44 background-color: #808080;
45 }
46 .top {
47 transform: rotateX(90deg) translateZ(50px);
48 background-color: #808080;
49 }
50 .bottom {
51 transform: rotateX(-90deg) translateZ(50px);
52 background-color: #808080;
53 }
54 </style>
55</head>
56<body>
57 <div id="box">
58 <div class="face front"></div>
59 <div class="face back"></div>
60 <div class="face left"></div>
61 <div class="face right"></div>
62 <div class="face top"></div>
63 <div class="face bottom"></div>
64 </div>
65 <script>
66 let box = document.getElementById('box');
67 let faces = box.children;
68 let angle = 0;
69 function animate() {
70 box.style.transform = `rotateX(${angle}deg) rotateY(${angle}deg)`;
71 angle += 1;
72 if (angle > 360) angle = 0;
73 requestAnimationFrame(animate);
74 }
75 animate();
76 </script>
77</body>
78</html>