//- 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
	-webkit-filter: drop-shadow(-1vmin 1vmin 1vmin #000)
}

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))
	}
}