Boxes Experiment (not finished)

HTML
<div class="wrapper"> <div class="box"></div> <div class="box"></div> </div>
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) } }
JAVASCRIPT
Expand for more options Login