Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS represent matrix using 3D cubes. https://codepen.io/davidkpiano/pen/aqNZxX
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
position: relative;
animation-timing-function: cubic-bezier(0.5, 0, 0, 1) !important;
}
body {
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
perspective: 1000px;
background: linear-gradient(to bottom right, #a4c5c7, #2d3f48);
}
body:hover > label,
body:hover > input {
opacity: 1;
}
label,
#shadows {
position: fixed;
top: 2vmin;
opacity: 0.5;
}
label {
left: 6vmin;
color: white;
font-weight: bold;
}
#shadows {
left: 2vmin;
}
#shadows:not(:checked) ~ .cubes {
--shadow-filter: none;
}
.cubes {
width: 10vmin;
height: 10vmin;
transform: rotateX(60deg) rotateZ(-45deg);
backface-visibility: visible;
overflow: visible;
transform-style: preserve-3d;
perspective: 9000px;
}
.cube {
height: 10vmin;
width: 10vmin;
transform-style: preserve-3d;
backface-visibility: visible;
transform-origin: center center -0.5vmin;
position: absolute;
top: 0;
left: 0;
}
.cube > .cube-wrap,
.large-shadow > .cube-wrap {
/* animation: cube 4s infinite both; */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: visible;
transform-origin: center center -0.5vmin;
will-change: transform;
}
.cube[data-cube^="1"] {
top: calc(-10vmin - 2px);
--color-bg-top: #a0ebe8;
--color-bg-bottom: #89e4e4;
--color-fl-top: #4eafbc;
--color-fl-bottom: #43a5b2;
}
.cube[data-cube^="2"] {
--color-bg-top: #89e4e4;
--color-bg-bottom: #76dee5;
--color-fl-top: #43a5b2;
--color-fl-bottom: #3d93a9;
}
.cube[data-cube^="3"] {
top: calc(10vmin + 2px);
--color-bg-top: #76dee5;
--color-bg-bottom: #63d3d4;
--color-fl-top: #3d93a9;
--color-fl-bottom: #3b8d9f;
}
.cube[data-cube^="11"],
.cube[data-cube^="21"],
.cube[data-cube^="31"] {
left: calc(-10vmin - 2px);
--color-fr-top: #2d505f;
--color-fr-bottom: #2d4f63;
}
.cube[data-cube^="12"],
.cube[data-cube^="22"],
.cube[data-cube^="32"] {
--color-fr-top: #2d4f63;
--color-fr-bottom: #2a5262;
}
.cube[data-cube^="13"],
.cube[data-cube^="23"],
.cube[data-cube^="33"] {
left: calc(10vmin + 2px);
--color-fr-top: #2a5262;
--color-fr-bottom: #2a5467;
}
.cube[data-cube$="2"] {
transform: translateZ(calc(10vmin + 2px));
}
.cube[data-cube$="3"] {
transform: translateZ(calc(-10vmin - 2px));
}
[class^="cube-"] {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: visible;
top: 0;
left: 0;
}
[class^="cube-"],
[class^="cube-"]:before {
will-change: transform;
animation: any 4s infinite both;
}
[class^="cube-"]:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: inherit;
}
.cube-top {
animation-name: cube-top;
overflow: hidden;
}
.cube-top:before,
.cube-top:after {
will-change: transform;
}
.cube-top:before {
background-image: linear-gradient(to bottom, #cbfeff, transparent), linear-gradient(to bottom, var(--color-bg-top), var(--color-bg-bottom));
background-size: 2px 100%, auto;
background-repeat: no-repeat;
}
.cube-top:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #dff4f0;
animation: cube-top-flash 4s infinite both;
}
.cube-front-left {
transform-origin: left center;
transform: rotateY(90deg);
overflow: hidden;
}
.cube-front-left:before {
background-image: linear-gradient(to bottom, var(--color-fl-top), var(--color-fl-bottom)), linear-gradient(to bottom, rgba(255, 255, 255, .5), transparent 60%);
background-size: auto auto 1px 100%;
background-repeat: no-repeat;
transform-origin: right;
animation-name: cube-front-left;
will-change: transform;
}
.cube-front-right {
transform-origin: bottom center;
transform: rotateX(90deg);
}
.cube-front-right:before {
background-image: linear-gradient(to right, var(--color-fr-top), var(--color-fr-bottom));
transform-origin: top;
animation-name: cube-front-right;
will-change: transform;
}
.cube-bottom {
transform: translateZ(-10vmin);
background-image: linear-gradient(to bottom, var(--color-bg-top), var(--color-bg-bottom));
animation-name: cube-bottom;
}
.cube-bottom:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #dff4f0;
animation: cube-bottom-flash 4s infinite both;
will-change: transform;
}
<input type="checkbox" id="shadows" checked /><label for="shadows">Soft shadows</label>
<div class="cubes">
<!-- row, column, z -->
<div class="cube" data-cube="111">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-z" data-cube="112"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="121">
<div class="cube-wrap">
<div class="cube-top">
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="131">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-z" data-cube="132"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="211">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="111"></div>
<div class="shadow-y" data-cube="111"></div>
<div class="shadow-z" data-cube="212"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="221">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="121"></div>
<div class="shadow-y" data-cube="121"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="231">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="131"></div>
<div class="shadow-y" data-cube="131"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="311">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="211"></div>
<div class="shadow-y" data-cube="211"></div>
<div class="shadow-z" data-cube="312"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="321">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="221"></div>
<div class="shadow-y" data-cube="221"></div>
<div class="shadow-z" data-cube="322"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="331">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="231"></div>
<div class="shadow-y" data-cube="231"></div>
<div class="shadow-z" data-cube="332"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<!-- top layer -->
<div class="cube" data-cube="112">
<div class="cube-wrap">
<div class="cube-top">
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="122">
<div class="cube-wrap">
<div class="cube-top">
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="132">
<div class="cube-wrap">
<div class="cube-top">
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="212">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="112"></div>
<div class="shadow-y" data-cube="112"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="222">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="122"></div>
<div class="shadow-y" data-cube="122"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="232">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="132"></div>
<div class="shadow-y" data-cube="132"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="312">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="212"></div>
<div class="shadow-y" data-cube="212"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="322">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="222"></div>
<div class="shadow-y" data-cube="222"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="332">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="232"></div>
<div class="shadow-y" data-cube="232"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<!-- bottom layer -->
<div class="cube" data-cube="113">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-z" data-cube="111"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="123">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-z" data-cube="121"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="133">
<div class="cube-wrap">
<div class="cube-top">
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="213">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="113"></div>
<div class="shadow-y" data-cube="113"></div>
<div class="shadow-z" data-cube="211"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="223">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-y" data-cube="123"></div>
<div class="shadow-z" data-cube="221"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="233">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-y" data-cube="133"></div>
<div class="shadow-z" data-cube="231"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="313">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="213"></div>
<div class="shadow-y" data-cube="213"></div>
<div class="shadow-z" data-cube="311"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="323">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="223"></div>
<div class="shadow-y" data-cube="223"></div>
<div class="shadow-z" data-cube="321"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="cube" data-cube="333">
<div class="cube-wrap">
<div class="cube-top">
<div class="shadow-flip" data-cube="233"></div>
<div class="shadow-y" data-cube="233"></div>
<div class="shadow-z" data-cube="331"></div>
</div>
<div class="cube-bottom"></div>
<div class="cube-front-left"></div>
<div class="cube-front-right"></div>
<div class="cube-back-left"></div>
<div class="cube-back-right"></div>
</div>
</div>
<div class="large-shadows">
<div class="large-shadow" data-cube="113"></div>
<div class="large-shadow" data-cube="123"></div>
<div class="large-shadow" data-cube="133"></div>
<div class="large-shadow" data-cube="213"></div>
<div class="large-shadow" data-cube="223"></div>
<div class="large-shadow" data-cube="233"></div>
<div class="large-shadow" data-cube="313"></div>
<div class="large-shadow" data-cube="323"></div>
<div class="large-shadow" data-cube="333"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.