A Pen by Claudio Procida.

Building-a-trapezoid.markdown

Building a trapezoid

Forked from Ana Tudor's Pen trapezoids with gradient backgrounds.

A Pen by Claudio Procida on CodePen.

License.

index.haml

-(0..6).each do |i|
	%div.trapezoid

style.scss

@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:first-child {
  transform: translate($l*(sqrt(2)-1)/2, $l*(sqrt(2)-1)/2) rotate(45deg) translateX($l) rotateX(15deg) rotateY(15deg);
  animation: rot 5s ease-in-out infinite alternate;
}
*/
.trapezoid {
  @for $i from 0 to 6 {
    $j: ($i+1)/6;
    $m: $l*$j;
    &:nth-child(#{$i + 1}) {
      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%;
        /* This formula is only accurate for i==5 */
        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;
}
/*
.trapezoid:first-child:before {
  width: 200%; height: 50%;
  transform: translateY(-$l/8*(5*sqrt(2)-6)) translateX(-$l/8*(8-3*sqrt(2))) rotate(-45deg);
}
*/
@keyframes rot {
  to {
    transform: translate($l*(sqrt(2)-1)/2, $l*(sqrt(2)-1)/2) rotate(45deg) translateX($l) rotateX(-15deg) rotateY(-15deg);
  }
}