- rows = 4
- cols = 7
- n = rows*cols
- (1..n).each do |i|
	.cube
View Compiled
$bg-list: 
	'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/fruit_01_kiwi.png'
	'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/fruit_02_orange.png' 
	'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/fruit_05_peach.png' 
	'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/fruit_03_strawberry.png' 
	'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/fruit_04_fig.png' 
	'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/fruit_06_watermelon.png'
	'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/fruit_07_pomegranate.png';
$n-bgs: length($bg-list);

$rows: 4;
$cols: 7;
$n: $rows*$cols;
$l: 2.5em;

html { overflow: hidden; }

body { background: gainsboro; }

.cube {
	position: absolute;
	top: 50%; left: 50%;
	margin: -$l/2;
	width: $l; height: $l;
	transform-style: preserve-3d;
	background-size: contain;
	
	@for $i from 0 to $n {
		&:nth-child(#{$i + 1}) {
			$j: floor($i/$cols);
			$k: $i%$cols;
			
			transform: 
				translate((2*$k - $cols + 1)*$l, 
									(2*$j - $rows + 1)*$l) 
				rotateX(45deg) rotate(45deg);
			background-image: 
				url(nth($bg-list, random($n-bgs)));
		}
	}
	
	&:before, &:after {
		position: absolute;
		width: inherit; height: inherit;
		background: inherit;
		content: '';
	}
	&:before {
		transform: rotate(-90deg) translate(-50%) 
			rotateY(-90deg) translate(-50%);
		-webkit-filter: brightness(.8);
		filter: brightness(.8);
	}
	&:after {
		transform: rotate(90deg) translateY(-50%) 
			rotateX(90deg) translateY(-50%);
		-webkit-filter: brightness(.65);
		filter: brightness(.65);
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.