CodePen Embed - CSS Cube 4x4

<div class='fake-content'></div>
<div class='scroll-text'>Scroll &darr;&darr;&darr;</div>
<div class='scene-example'>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');


html {
    font-family: 'Rubik', sans-serif;
    font-size: 2vmin;
}


body {
    background: #CAD2C5;
}


.scroll-text {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    z-index: 10;
}


.fake-content {
    height: 500vh;
}


.scene-example {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10rem;
    width: 15rem;
    transform: translateX(-50%) translateY(-50%);
    perspetive: 10rem;
}


@keyframes move-6 {
    from {
        transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(100%);
    }
    to {
        transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(100%) translateZ(-3rem);
    }
}


@keyframes move-19 {
    from {
        transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(3rem);
    }
    to {   
        transform: rotateY(30deg) rotateX(20deg) translateX(400%) translateY(200%) translateZ(3rem);
    }
}


@keyframes move-37 {
    from {  
        transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(0) translateZ(9rem);
    }
    to {
        transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(-100%) translateZ(9rem);
    }
}


.small-cube {
    height: 3rem;
    width: 3rem;
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateY(30deg) rotateX(20deg);
}


/* front */

.small-cube:nth-of-type(1) {
    z-index: 4;
}


.small-cube:nth-of-type(2) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%);
}


.small-cube:nth-of-type(3) {
    z-index: 6;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%);
}


.small-cube:nth-of-type(4) {
    z-index: 7;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%);
}


.small-cube:nth-of-type(5) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateY(100%);
}


.small-cube:nth-of-type(6) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(100%);
    animation: move-6 4s ease-in-out infinite alternate;
}


.small-cube:nth-of-type(7) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(100%);
}


.small-cube:nth-of-type(8) {
    z-index: 6;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(100%);
}


.small-cube:nth-of-type(9) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateY(200%);
}


.small-cube:nth-of-type(10) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(200%);
}


.small-cube:nth-of-type(11) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(200%);
}


.small-cube:nth-of-type(12) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%);
}


.small-cube:nth-of-type(13) {
    z-index: 1;
    transform: rotateY(30deg) rotateX(20deg) translateY(300%);
}


.small-cube:nth-of-type(14) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(300%);
}


.small-cube:nth-of-type(15) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(300%);
}


.small-cube:nth-of-type(16) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(300%);
}


/* right */

.small-cube:nth-of-type(17) {
    z-index: 6;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateZ(3rem);
}


.small-cube:nth-of-type(18) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(100%) translateZ(3rem);
}


.small-cube:nth-of-type(19) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(3rem);
    animation: move-19 5s ease-in-out infinite alternate;
}


.small-cube:nth-of-type(20) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(300%) translateZ(3rem);
}


.small-cube:nth-of-type(21) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateZ(6rem);
}


.small-cube:nth-of-type(22) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(100%) translateZ(6rem);
}


.small-cube:nth-of-type(23) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(6rem);
}


.small-cube:nth-of-type(24) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(300%) translateZ(6rem);
}


/* top */

.small-cube:nth-of-type(25) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateZ(9rem);
}


.small-cube:nth-of-type(26) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(100%) translateZ(9rem);
}


.small-cube:nth-of-type(27) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(9rem);
}


.small-cube:nth-of-type(28) {
    z-index: 1;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(300%) translateZ(9rem);
}


.small-cube:nth-of-type(29) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateZ(3rem);
}


.small-cube:nth-of-type(30) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateZ(3rem);
}


.small-cube:nth-of-type(31) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateZ(3rem);
}


.small-cube:nth-of-type(32) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateZ(6rem);
}


.small-cube:nth-of-type(33) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateZ(6rem);
}


.small-cube:nth-of-type(34) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateZ(6rem);
}


.small-cube:nth-of-type(35) {
    z-index: 1;
    transform: rotateY(30deg) rotateX(20deg) translateZ(9rem);
}


.small-cube:nth-of-type(36) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateZ(9rem);
}


.small-cube:nth-of-type(37) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateZ(9rem);
    animation: move-37 3s ease-in-out infinite alternate;
}


.small-cube > .face {
    position: absolute;
    height: 3rem;
    width: 3rem;
}


/* right */
.small-cube > .face:nth-of-type(1) {
    transform-origin: 100% 0;
    transform: rotateY(90deg);
    background: #445747;
}


/* front */
.small-cube > .face:nth-of-type(2) {
    transform-origin: 100% 0;
    background: #84A98C;
}


/* top */
.small-cube > .face:nth-of-type(3) {
    transform-origin: 100% 0;
    transform: rotateX(90deg);
    background: #C9F2CF;
}

const cubes = document.querySelectorAll('.small-cube');

const cubeFaces = [];

cubes.forEach((cube) => {
    cubeFaces.push(cube.querySelectorAll('.face'));
});

document.addEventListener('scroll', () => {
    const delta = 10 * window.scrollY / window.innerHeight;

    cubeFaces.forEach((cube, index) => {
        const translateX = delta * Math.sin(1 + index * 3);
        const translateY = delta * Math.sin(1 + index * 7);
        const translateZ = delta * Math.sin(1 + index * 11);
        const scale = Math.max(1 - delta * Math.sin(index * 13) / 10, 0.5);
        
        cube[0].style.transform = `rotateY(90deg) translateZ(${translateX}rem) translateY(${translateY}rem) translateX(${-translateZ}rem) scale(${scale})`;
        cube[1].style.transform = `translateX(${translateX}rem) translateY(${translateY}rem) translateZ(${translateZ}rem) scale(${scale})`;
        cube[2].style.transform = `rotateX(90deg) translateX(${translateX}rem) translateZ(${-translateY}rem) translateY(${translateZ}rem) scale(${scale})`;
    });
});

View Compiled

This Pen is owned by Ivan Bogachev on CodePen.

See more by @sfi0zy on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.