<div class="wrapper">
<div class="container">
<div class="image-cube">
<div class="front">
<img src="https://images.unsplash.com/photo-1635353019337-d37813892542?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjQwNDg3NQ&ixlib=rb-1.2.1&q=85" />
</div>
<div class="right">
<img src="https://images.unsplash.com/photo-1635320623348-bb1f46428927?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjQwNDg3NQ&ixlib=rb-1.2.1&q=85" />
</div>
<div class="back">
<img src="https://images.unsplash.com/photo-1635355811454-d2371b64dfe8?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjQwNDg3NQ&ixlib=rb-1.2.1&q=85" />
</div>
<div class="left">
<img src="https://images.unsplash.com/photo-1635261155180-77111688b0cf?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjQwNTEyMA&ixlib=rb-1.2.1&q=85" />
</div>
</div>
</div>
<div class="btns">
<button id="prev">
<i class="fas fa-arrow-left">Prev</i>
</button>
<button id="next">
<i class="fas fa-arrow-right">Next</i>
</button>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #FAD7A0;
}
.wrapper {
border: 2px solid red;
background-color: blue;
height: 300px;
width: 300px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.container {
background-color: green;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px;
perspective-origin: 50%;
}
.image-cube {
width: 300px;
height: 300px;
transform-style: preserve-3d;
position: relative;
transition: 2s;
}
.image-cube div {
height: 300px;
width: 300px;
position: absolute;
}
img {
width: 100%;
height: 100%;
transform: translateZ(0);
}
.front {
transform: translateZ(150px);
}
.right {
transform: rotateY(-270deg) translateX(150px);
transform-origin: 100% 0;
}
.back {
transform: translateZ(-150px) rotateY(180deg);
}
.left {
transform: rotateY(270deg) translateX(-150px);
transform-origin: 0 50%;
}
.btns {
margin-top: 80px;
display: flex;
justify-content: space-between;
}
.btns button {
background-color: transparent;
color: #ffffff;
border: 3px solid #ffffff;
background: #0a3342;
padding: 8px 40px;
border-radius: 20px;
font-size: 20px;
cursor: pointer;
}let cube = document.querySelector(".image-cube");
let btnNext = document.getElementById("next");
let btnPrev = document.getElementById("prev");
let pos = 0;
btnNext.addEventListener("click", () => {
pos -= 90;
cube.style.transform = `rotateY(${pos}deg)`;
});
btnPrev.addEventListener("click", () => {
pos += 90;
cube.style.transform = `rotateY(${pos}deg)`;
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.