Colored Cubes

HTML
<section> <cube> <face class="left"></face> <face class="top"></face> <face class="right"></face> </cube> </section> <section class="dark"> <cube> <face class="left"></face> <face class="top"></face> <face class="right"></face> </cube> </section>
SCSS
$size : 35vmin; html, body { height: 100%; } body, section { display: flex; } section { flex: 1; justify-content: center; align-items: center; pointer-events: none; } cube { position: relative; width: $size; height: $size; transform: rotateX(-45deg) rotateY(45deg); transform-origin: 50% 50% $size*-.5; transform-style: preserve-3d; } face { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-blend-mode: multiply; &.left { transform: rotateY(90deg); transform-origin: 0 50%; background-image: linear-gradient(transparent, #ff0), linear-gradient(90deg, transparent, #f0f); } &.top { transform: rotateX(-90deg); transform-origin: 50% 0; background-image: linear-gradient(transparent, #f0f), linear-gradient(90deg, transparent, #0ff); } &.right { background-image: linear-gradient(transparent, #ff0), linear-gradient(90deg, transparent, #0ff); } } .dark { background: #000; face { background-blend-mode: screen; background-color: black; &.left { background-image: linear-gradient(transparent, #00f), linear-gradient(90deg, transparent, #f00); } &.top { background-image: linear-gradient(transparent, #f00), linear-gradient(90deg, transparent, #0f0); } &.right { background-image: linear-gradient(transparent, #00f), linear-gradient(90deg, transparent, #0f0); } } }
JAVASCRIPT
Expand for more options Login