* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0; /* Added background color for contrast */
}
#container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 5px;
width: 90%; /* Added width constraint */
perspective: 1000px;
}
.box {
background-color: red;
height: 50px;
width: 50px;
transform-style: preserve-3d;
transition: transform 0.5s, filter 0.3s;
}
.box:hover {
transform: translateZ(150px);
filter: brightness(1);
background-color: #87F1FF;
}
.box:hover + .box {
transform: translateZ(100px) rotateY(60deg);
filter: brightness(0.8);
}
.box:hover + .box + .box {
transform: translateZ(50px) rotateY(30deg);
filter: brightness(0.6);
}
.box:hover + .box + .box + .box {
transform: translateZ(25px) rotateY(15deg);
filter: brightness(0.4);
}
/* Hover effect for previous siblings */
.box:has(+ .box:hover) {
transform: translateZ(100px) rotateY(-60deg);
filter: brightness(0.8);
}
.box:has(+ .box + .box:hover) {
transform: translateZ(50px) rotateY(-30deg);
filter: brightness(0.6);
}
.box:has(+ .box + .box + .box:hover) {
transform: translateZ(25px) rotateY(-15deg);
filter: brightness(0.4);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hovering Boxes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container"></div>
<script>
// Create 100 boxes and append them to the container
const container = document.getElementById('container');
const boxCount = 100;
for(let i = 0; i < boxCount; i++) {
const box = document.createElement('div');
box.className = 'box';
container.appendChild(box);
}
</script>
</body>
</html>