SCSS
$sh: drop-shadow(1px 1px 1px #000);
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
body { perspective: 20em; }
.wrapper {
transform-style: preserve-3d;
animation: rotate 3s linear infinite
}
.box {
width: 8em;
height: 8em;
background: rgba(#27ae60, .5);
animation: inherit;
animation-direction: reverse;
-webkit-filter: $sh;
filter: $sh;
&:first-child {
background: rgba(#2980b9, .5);
}
}
@keyframes rotate {
to { transform: rotateX(1turn) }
}
