Lien d’origine: https://codepen.io/thebabydino/pen/BaaLZjq
HTML:
<section class="multiPanelBackground"> <div class="assembly" style="--dx: 0"> <div class="panel" style="--i: 0; --k: 0.25; --p: 0; --dx: 0; --dz: -0.2"></div> <div class="panel" style="--i: 1; --k: 0.5; --p: 0.25; --dx: -0.1; --dz: 0"></div> <div class="panel" style="--i: 2; --k: 0.25; --p: 0.75; --dx: 0; --dz: 0"></div> </div> </section>
CSS:
.multiPanelBackground {
margin: 0;
height: 100vh;
perspective: 125vmin;
-webkit-filter: drop-shadow(-1vmin 1vmin 1vmin #000);
background-color: #333;
}
.multiPanelBackground div {
position: absolute;
transform-style: preserve-3d;
}
.multiPanelBackground .assembly {
top: 50%;
left: calc(50% - .5*var(--dx)*85vmin);
transform: rotatey(35deg);
}
.multiPanelBackground .panel {
--mid: calc((var(--p) + var(--k)*0.25)*85vmin);
transform: translate3d(calc(var(--dx)*85vmin), 0, calc(var(--dz)*85vmin));
}
.multiPanelBackground .panel:before, .multiPanelBackground .panel:after {
position: absolute;
margin: -32.5vmin -42.5vmin;
width: 85vmin;
height: 65vmin;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/bg_sq_halloween_0.jpg") 50%/cover;
content: "";
}
.multiPanelBackground .panel:before {
transform-origin: var(--mid);
transform: rotatey(-90deg);
-webkit-clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
filter: brightness(0.4);
}
.multiPanelBackground .panel:after {
-webkit-clip-path: inset(0 calc(100% - (var(--p) + var(--k))*85vmin) 0 var(--mid));
clip-path: inset(0 calc(100% - (var(--p) + var(--k))*85vmin) 0 var(--mid));
}