<div class="container">
<div class="screen" id="screen" tabindex="0" role="button">
<div class="stories">
<div class="cuboid">
<div class="face face--front"></div>
<div class="face face--right"></div>
</div>
</div>
</div>
</div>
body {
background: black;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
:root {
--width: 300px;
--height: 600px;
}
.screen {
perspective: 1600px;
overflow: hidden;
}
.stories {
transform: translateZ(calc(var(--width) / 2 * -1));
transform-style: preserve-3d;
}
.screen--showing-front .stories {
animation: translate-z-1 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}
.screen--showing-right .stories {
animation: translate-z-2 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}
.cuboid {
transform: rotateY(0deg);
transform-style: preserve-3d;
transition: transform 0.4s cubic-bezier(0.37, 0, 0.63, 1);
width: var(--width);
height: var(--height);
position: relative;
}
.screen--showing-front .cuboid {
transform: rotateY(0deg);
}
.screen--showing-right .cuboid {
transform: rotateY(-90deg);
}
.face {
width: var(--width);
height: var(--height);
position: absolute;
top: 0;
left: 0;
border-radius: 16px;
transition: opacity 0.4s;
backface-visibility: hidden;
}
.face--front {
transform: translateZ(calc(var(--width) / 2));
transform-style: preserve-3d;
background: url("https://images.unsplash.com/photo-1562889858-6c5831947f72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80");
background-size: cover;
background-position: center;
}
.face--right {
transform: rotateY(90deg) translateZ(calc(var(--width) / 2));
transform-style: preserve-3d;
background: url("https://images.unsplash.com/photo-1541447237128-f4cac6138fbe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=918&q=80");
background-size: cover;
background-position: center;
}
.screen--showing-right .face--front {
opacity: 0.5;
}
.screen--showing-front .face--right {
opacity: 0.5;
}
@keyframes translate-z-1 {
to,
from {
transform: translateZ(calc(var(--width) / 2 * -1));
}
50% {
transform: translateZ(calc(var(--width) / 2 * -1.407));
}
}
@keyframes translate-z-2 {
to,
from {
transform: translateZ(calc(var(--width) / 2 * -1));
}
50% {
transform: translateZ(calc(var(--width) / 2 * -1.407));
}
}
var screen = document.getElementById("screen");
screen.addEventListener("click", function () {
if (screen.classList.contains("screen--showing-right")) {
screen.classList.add("screen--showing-front");
screen.classList.remove("screen--showing-right");
} else {
screen.classList.add("screen--showing-right");
screen.classList.remove("screen--showing-front");
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.