<!DOCTYPE html>
<html>
<style>
html {
overflow: hidden;
background: #fff;
}
body {
margin: 0;
height: 100vh;
perspective: 180vmin;
-webkit-filter: drop-shadow(-1vmin 1vmin 1vmin #000);
}
div {
position: absolute;
transform-style: preserve-3d;
}
.assembly {
top: 50%;
left: calc(50% - 0.6*var(--dx)*90vmin);
transform: rotatey(36deg);
}
.panel {
--mid: calc((var(--p) + var(--k)*0.30)*90vmin);
transform: translate3d(calc(var(--dx)*90vmin), 0, calc(var(--dz)*90vmin));
width: 120vmin;
}
.panel:before,
.panel:after {
content: "";
position: absolute;
margin: -33vmin -66vmin;
height: 60vmin;
width: 100%;
background: url("https://picsum.photos/1000/ ") 50% / cover;
-webkit-clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
}
.panel:before {
--top: 0;
--right: calc((100% - var(--mid)));
--bottom: 0;
--left: 0;
transform-origin: var(--mid);
transform: rotatey(-90deg);
filter: brightness(0.3);
}
.panel::after {
--top: 0;
--right: calc((100% - (var(--p) + var(--k)) * 90vmin));
--bottom: 0;
--left: var(--mid);
}
</style>
</head>
<body translate="no">
<div class="assembly" style="--dx: 0.4;">
<div class="panel" style="--k: 0.5; --p: 0; --dx: 0; --dz: 0"></div>
<div class="panel" style="--k: 0.5; --p: 0.4; --dx: 0; --dz: 0"></div>
<div class="panel" style="--k: 0.5; --p: 0.8; --dx: 0; --dz: 0"></div>
</div>
</body>
</html>