console
<div id="domino">
<div class="blocks">
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
<div class="block">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</div>
</div>
$blockWidth: 20px;
$blockHeight: 150px;
$blockDepth: 100px;
body {
background: #fff;
height: 100vh;
overflow: hidden;
display: flex;
font-family: 'Anton', sans-serif;
justify-content: center;
align-items: center;
// perspective: 1000px;
}
#domino {
filter: drop-shadow(0 15px 12px rgba(100, 50, 0, 0.2));
transform-style: preserve-3d;
// filter+transfrom-style do not working on Firefox...
@-moz-document url-prefix() {
filter: none;
}
perspective: 1500px;
.blocks {
display: flex;
transform-style: preserve-3d;
animation: rotateY 30000ms linear infinite;
}
.block {
position: relative;
width: $blockWidth;
height: $blockHeight;
margin-right: 100px;
transform-origin: 100% 100%;
transform-style: preserve-3d;
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
animation: blockAnimation 1000ms $i * 200ms cubic-bezier(0.600, 0.055, 0.000, 0.800) infinite alternate;
}
}
.wall {
position: absolute;
opacity: 0.6;
&:nth-child(1) { // front
width: 100%;
height: 100%;
background: rgba(244, 128, 36, 1);
transform: translateZ($blockDepth / 2);
}
&:nth-child(2) { // back
width: 100%;
height: 100%;
background: rgba(244, 128, 36, 1);
transform: rotateX(180deg) translateZ($blockDepth / 2);
}
&:nth-child(3) { // top
width: 100%;
height: $blockDepth;
background: rgba(244 + 30, 128 + 30, 36 + 30, 1);
transform: rotateX(90deg) translateZ($blockDepth / 2);
}
&:nth-child(4) { // bottom
width: 100%;
height: $blockDepth;
background: rgba(244 - 30, 128 - 30, 36 - 30, 1);
transform: rotateX(-90deg) translateZ($blockDepth / -2 + $blockHeight);
}
&:nth-child(5) { // left
width: $blockDepth;
height: 100%;
background: rgba(244 + 15, 128 + 15, 36 + 15, 1);
transform: rotateY(-90deg) translateZ($blockDepth / 2);
}
&:nth-child(6) { // right
width: $blockDepth;
height: 100%;
background: rgba(244 + 15, 128 + 15, 36 + 15, 1);
transform: rotateY(90deg) translateZ($blockDepth / -2 + $blockWidth);
}
}
}
}
@keyframes blockAnimation {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(80deg);
}
}
@keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}