- (1..100).each do
    .div1
View Compiled
@for $i from 1 through 100{
  .div1:nth-child(#{$i}) {
  position:absolute;
  -webkit-transform-style: preserve-3d;  
-webkit-perspective: random($i)+px;
-webkit-perspective-origin: -50% random($i)+'px' 200px; 
-webkit-transform-origin:'-'+random($i)+'%' 100% 200px;
  left:random($i+800)+px;
  top:random($i+400)+px;
  opacity:0.5;
  box-shadow: 0px 0px 30px random($i) - 10 +px rgb(random(255),random(255),random(255));
-webkit-transition: box-shadow 5s ease-in-out;
-webkit-animation: 10+random(30)+s crazyBorders ease-in-out infinite;
}

@-webkit-keyframes crazyBorders {
  0%,100% {-webkit-transform:rotate(0deg) }
  50% {-webkit-transform: rotate(random(1000+$i)+deg)translateX(random(1000+$i)+px);}
  75% {-webkit-transform:rotateY(random($i)+deg);}
  
}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.