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);
}
}
}
