<a href="https://www.youtube.com/embed/LOm7j3aameE"><h1>3D Cube Image Gallery</h1>
<div class="cube-container">
<div class="cube initial-position">
<img class="cube-face-image image-1" src="https://images.unsplash.com/photo-1445810694374-0a94739e4a03?w=300&h=300&fit=crop">
<img class="cube-face-image image-2" src="https://images.unsplash.com/photo-1515260268569-9271009adfdb?w=300&h=300&fit=crop">
<img class="cube-face-image image-3" src="https://images.unsplash.com/photo-1506045412240-22980140a405?w=300&h=300&fit=crop">
<img class="cube-face-image image-4" src="https://images.unsplash.com/photo-1514041181368-bca62cceffcd?w=300&h=300&fit=crop">
<img class="cube-face-image image-5" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=300&h=300&fit=crop">
<img class="cube-face-image image-6" src="https://images.unsplash.com/photo-1486334803289-1623f249dd1e?w=300&h=300&fit=crop">
</div>
</div>
<h2>Click the images below to rotate the cube</h2></a>
<div class="image-buttons">
<input type="image" class="show-image-1" src="https://images.unsplash.com/photo-1445810694374-0a94739e4a03?w=100&h=100&fit=crop"></input>
<input type="image" class="show-image-2" src="https://images.unsplash.com/photo-1515260268569-9271009adfdb?w=100&h=100&fit=crop"></input>
<input type="image" class="show-image-3" src="https://images.unsplash.com/photo-1506045412240-22980140a405?w=100&h=100&fit=crop"></input>
<input type="image" class="show-image-4" src="https://images.unsplash.com/photo-1514041181368-bca62cceffcd?w=100&h=100&fit=crop"></input>
<input type="image" class="show-image-5" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=100&h=100&fit=crop"></input>
<input type="image" class="show-image-6" src="https://images.unsplash.com/photo-1486334803289-1623f249dd1e?w=100&h=100&fit=crop"></input>
</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat:500);
:root {
    font-size: 10px;
    --border-color: rgb(0, 143, 238);
}
* {
    box-sizing: border-box;
}
body {
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    min-height: 100vh;
    padding: 4rem 2rem;
    color: #fafafa;
    background-color: #080808;
}
h1 {
    font-size: 4rem;
    color: #0097fb;
}
h2 {
    font-size: 2rem;
    margin-bottom: 2.5rem;
    color: #169af1;
}
.cube-container {
    position: relative;
    width: 30rem;
    height: 30rem;
    margin: 5rem auto 6rem;
    perspective: 100rem;
}
.cube {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);
}
.cube-face-image {
    display: block;
    position: absolute;
    box-shadow: 0 0 0.5rem #fff,
        0 0 1.5rem var(--border-color), 0 0 3rem var(--border-color);
}
.image-buttons {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 1.5rem;
    justify-content: center;
}
.image-buttons input {
    border: 0.2rem solid #fafafa;
}

 .image-buttons input:focus {
outline: none;
border: 0.2rem solid var(--border-color);
}
/* Transform images to create cube */
.image-1 {
transform: translateZ(15rem);
}
.image-2 {
transform: rotateX(-180deg) translateZ(15rem);
}
.image-3 {
transform: rotateY(90deg) translateZ(15rem);
}
.image-4 {
transform: rotateY(-90deg) translateZ(15rem);
}
.image-5 {
transform: rotateX(90deg) translateZ(15rem);
}
.image-6 {
transform: rotateX(-90deg) translateZ(15rem);
}
/* Transform cube to show correct image */
.cube.initial-position {
transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg);
}
.cube.show-image-1 {
transform: translateZ(-15rem);
}
.cube.show-image-2 {
transform: translateZ(-15rem) rotateX(180deg);
}
.cube.show-image-3 {
transform: translateZ(-15rem) rotateY(-90deg);
}
.cube.show-image-4 {
transform: translateZ(-15rem) rotateY(90deg);
}
.cube.show-image-5 {
transform: translateZ(-15rem) rotateX(-90deg);
}
.cube.show-image-6 {
transform: translateZ(-15rem) rotateX(90deg);
}
window.addEventListener("DOMContentLoaded", () => {
const cube = document.querySelector(".cube"),
imageButtons = document.querySelector(".image-buttons");
let cubeImageClass = cube.classList[1];
imageButtons.addEventListener("click", e => {
const targetNode = e.target.nodeName,
targetClass = e.target.className;
if (targetNode === "INPUT" && targetClass !== cubeImageClass) {
console.log(`Show Image: ${targetClass.charAt(11)}`);
cube.classList.replace(cubeImageClass, targetClass);
cubeImageClass = targetClass;
}
});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.