- 12.times do |i|
	.item #{i}
View Compiled
@import 'compass/css3';

$n: 12;
$d: 2em;
$ax: 40deg;
$ba: 360deg/$n;

body { transform-style: preserve-3d; }

.item {
	position: absolute;
	margin: calc(50vh - #{.5*$d}) 0 0 calc(50vw - #{.5*$d});
	width: $d; height: $d;
	transform: rotate(var(--a, 0deg)) translate(1.5*$d) rotateX($ax) scaleY(1/cos($ax));
	box-shadow: inset 0 0 0 4px;
	background: gainsboro;
	font: 900 2em/#{$d} trebuchet ms, tahoma, verdana;
	text-align: center;
	
	@for $i from 1 to $n { &:nth-child(#{$i + 1}) { --a: $i*$ba } }
}
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.