Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>3D City – Two Buildings</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #87CEEB, #f0f0f0);
font-family: Arial, sans-serif;
perspective: 1000px;
}
.scene {
width: 400px;
height: 400px;
position: relative;
transform-style: preserve-3d;
animation: rotateScene 20s linear infinite;
}
@keyframes rotateScene {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.ground {
position: absolute;
width: 400px;
height: 400px;
background: #228B22;
transform: rotateX(90deg) translateZ(-200px);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
.building {
position: absolute;
bottom: 0;
transform-style: preserve-3d;
}
.building .side {
position: absolute;
background: #555;
border: 1px solid #333;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.building .window {
width: 15px;
height: 20px;
background: yellow;
border: 1px solid #000;
margin: 5px;
box-shadow: 0 0 5px rgba(255, 255, 0, 0.8);
}
.building.two-floors {
width: 100px;
height: 80px;
left: 50px;
transform: translateZ(50px);
}
.building.seven-floors {
width: 150px;
height: 280px;
left: 200px;
transform: translateZ(50px);
}
.side.front {
width: 100%;
height: 100%;
transform: translateZ(50px);
}
.side.back {
width: 100%;
height: 100%;
transform: rotateY(180deg) translateZ(50px);
}
.side.left {
width: 50px;
height: 100%;
transform: rotateY(-90deg) translateZ(50px);
}
.side.right {
width: 50px;
height: 100%;
transform: rotateY(90deg) translateZ(50px);
}
.side.top {
width: 100%;
height: 50px;
transform: rotateX(90deg) translateZ(50px);
}
.side.bottom {
width: 100%;
height: 50px;
transform: rotateX(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class=”scene”>
<div class=”ground”></div>
<!– Two-Floor Building –>
<div class=”building two-floors”>
<div class=”side front”></div>
<div class=”side back”></div>
<div class=”side left”></div>
<div class=”side right”></div>
<div class=”side top”></div>
<div class=”side bottom”></div>
</div>
<!– Seven-Floor Building –>
<div class=”building seven-floors”>
<div class=”side front”></div>
<div class=”side back”></div>
<div class=”side left”></div>
<div class=”side right”></div>
<div class=”side top”></div>
<div class=”side bottom”></div>
</div>
</div>
</body>
</html>
