Skip to content

Instantly share code, notes, and snippets.

@claudiopro
Created July 21, 2014 12:47
Show Gist options
  • Save claudiopro/8235a906c0cd001e9935 to your computer and use it in GitHub Desktop.
Save claudiopro/8235a906c0cd001e9935 to your computer and use it in GitHub Desktop.
A Pen by Claudio Procida.
-(0..6).each do |i|
%div.trapezoid
@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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment