*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
	background-color: #000;
	color: #fff;
	min-height: 100vh;
	display: grid;
	place-items: center;
	perspective: 60px;
	overflow: hidden;
  
	* {
		transform-style: preserve-3d;
	}
}

.scene {
	position: relative;

	* { position: absolute; }
}

.sqrs {
	--sqrSize: 30px;
	--sqrCount: 15;

	position: relative;
	width: calc(var(--sqrSize) * var(--sqrCount));
	aspect-ratio: 1;
	background-image:
		linear-gradient(0deg, #fff3, transparent 3px),
		linear-gradient(90deg, #fff3, transparent 3px),
		linear-gradient(180deg, #fff3, transparent 3px),
		linear-gradient(270deg, #fff3, transparent 3px);
	background-size: var(--sqrSize) var(--sqrSize);
	
	&::after {
		content: '';
		position: absolute;
		inset: 0%;
		background-image: radial-gradient(closest-side, transparent, #000e 50%);
		transform: translateZ(calc(var(--sqrSize) * 1.1));
	}
}

.sqr {
	position: absolute;
	left: calc(var(--x) * var(--sqrSize));
	top: calc(var(--y) * var(--sqrSize));
	width: var(--sqrSize);
	aspect-ratio: 1;
	rotate: calc(var(--a) * 90deg);

	div {
		position: absolute;
		inset: 0;
		border: 5px solid hsl(var(--hue), 100%, 50%);
		transform-origin: bottom;
		-webkit-animation: sqr var(--duration) linear;
		        animation: sqr var(--duration) linear;
	}
}

@-webkit-keyframes sqr {
	to { transform: rotateX(-180deg); }
}

@keyframes sqr {
	to { transform: rotateX(-180deg); }
}