-(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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.