-(1..6).each do |i|
%div.trapezoid
View Compiled
@import "compass/css3";
$l: 20em;
$b: midnightblue;
html,body {
margin: 0;
padding: 0;
background-color: palevioletred;
}
body{
perspective: 4*$l;
}
.trapezoid {
position: absolute;
overflow: hidden;
margin: 0;
/**outline: solid 1px;/**/
border: 2px solid $b;
background-color: rgba(173, 216, 230, 0.3);
transform-style: preserve-3d;
}
.trapezoid {
@for $i from 0 to 6 {
$m: $l*($i+1)/6;
&:nth-child(#{$i + 1}) {
/*
filter: blur((5-$i)*0.3px);
*/
width: $m;
height: $m;
transform: translate($m*(sqrt(2)-1)/2, $m*(sqrt(2)-1)/2) rotate(45deg) translateX($m) rotateX(15deg) rotateY(15deg);
animation: rot 5s ease-in-out infinite alternate;
&:before {
width: 200%; height: 50%;
transform: translateY(-$m/8*(5*sqrt(2)-6)) translateX(-$m/8*(8-3*sqrt(2))) rotate(-45deg);
}
}
}
}
.trapezoid:before {
display: block;
background: powderblue;
content: '';
outline: 2px solid $b;
}
@keyframes rot {
to {
transform: translate($l*(sqrt(2)-1)/2, $l*(sqrt(2)-1)/2) rotate(45deg) translateX($l) rotateX(-15deg) rotateY(-15deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.