JSFiddle - React, Tailwind, and code Playground
SCSS
$itemZ: 10;
$cameraSpeed: 3;
body {
perspective: 300px;
perspective-origin: 400px 400px;
div {
background-color: rgba(255, 0, 0, 0.1);
width: 200px;
height: 200px;
position: absolute;
}
@for $i from 0 through 19 {
div:nth-child(#{$i + 1}) {
transform: translate3D(0%, 0%, $itemZ * $cameraSpeed * $i * -1px);
}
}
}
JavaScript
Array.from({ length: 20 }, () =>
document.body.appendChild(
document.createElement('div')
)
)