- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.