``````//- you can add or remove panel objects
//- k is the relative width
//- (k values don't need to add up to anything, algorithm handles it)
//- dx (optional) is the relative* offset along the x axis (to right is positive)
//- dz (optional) is the relative* offset along the z axis (forward is positive)
//- *relative to the sum of the widths of all the panels
- let panels = [
-		{ k: 1, dx: 0, dz: -.2 },
- 	{ k: 2, dx: -.1 },
- 	{ k: 1, dx: .1 }
- ];
- let np = panels.length;
- let sum = panels.reduce((a, c) => a + c.k, 0);
- let prv_k = 0;

- panels.forEach((c, i, a) => {
- 	c.p = prv_k;
- 	prv_k += +(c.k /= sum).toFixed(3);
- 	c.dx += i ? a[i - 1].dx : 0;
- });

.assembly(style=`--dx: \${panels[np - 1].dx}`)
- for(let i = 0; i < np; i++)
- let c = panels[i];
.panel(style=`--i: \${i}; --k: \${c.k}; --p: \${+c.p.toFixed(3)}; --dx: \${c.dx}; --dz: \${c.dz || 0}`)``````
``````// change \$url value below to any image of any aspect ratio
\$url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/bg_sq_halloween_0.jpg';
\$w: 85vmin;
\$h: 65vmin;
\$f: .25;

html { overflow: hidden; background: #333 }

body {
margin: 0;
height: 100vh;
perspective: 125vmin;
// Firefox fucks this up
}

div {
position: absolute;
transform-style: preserve-3d
}

.assembly {
top: 50%; left: calc(50% - .5*var(--dx)*#{\$w});
transform: rotatey(35deg)
}

.panel {
--mid: calc((var(--p) + var(--k)*#{\$f})*#{\$w});
transform: translate3d(calc(var(--dx)*#{\$w}), 0, calc(var(--dz)*#{\$w}));

&:before, &:after {
position: absolute;
margin: -.5*\$h (-.5*\$w);
width: \$w; height: \$h;
background: url(\$url) 50%/ cover;
content: ''
}

&:before {
transform-origin: var(--mid);
transform: rotatey(-90deg);
clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
filter: brightness(.4)
}

&:after {
clip-path: inset(0 calc(100% - (var(--p) + var(--k))*#{\$w}) 0 var(--mid))
}
}``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.