- @n = 49;
.container
-@n.times do
.block
.face.left
.face.right
.face.front
.face.back
.face.top
.face.bottom
View Compiled
@import "compass/css3";
$blockSize:50px;
$sizeAdjust:2.2;
$numBlocks:49;
$time:1s;
$timeFunction:ease-in-out;
$col:floor(sqrt($numBlocks));
$numRules:(($numBlocks / $col) * 2) - 1;
$delay:2;
body {
margin:0;
padding:0;
transform-style:preserve-3d;
perspective:600;
}
.container {
width:$blockSize * $col;
margin:30vh auto;
transform:rotateX(-20deg) rotateY(-30deg) translate3d(0,0,0);
transform-style:preserve-3d;
}
.block {
width:$blockSize;
height:$blockSize;
position:relative;
float:left;
transform-style:preserve-3d;
}
.face {
width:$blockSize;
height:$blockSize;
position:absolute;
box-sizing:border-box;
}
.left {
transform-origin:0% 50%;
animation: left $time $timeFunction alternate infinite;
background:#373C94;
}
.right {
transform-origin:100% 50%;
animation: right $time $timeFunction alternate infinite;
background:#373C94;
}
.front {
animation: front $time $timeFunction alternate infinite;
background:#5287A5;
}
.back {
transform:translateZ(-$blockSize);
background:#5287A5;
}
.top {
transform-origin:50% 0%;
animation: top $time $timeFunction alternate infinite;
background:#81C8A8;
}
.bottom {
transform-origin:50% 100%;
animation: bottom $time $timeFunction alternate infinite;
background:#81C8A8;
}
//animations
@keyframes left {
0% {width:$blockSize;transform:rotateY(90deg) translateX(0);}
100% {width:$blockSize*$sizeAdjust;transform:rotateY(90deg) translateX(-(($blockSize * $sizeAdjust) - $blockSize));}
}
@keyframes right {
0% {width:$blockSize;transform:rotateY(-90deg) translateZ(0) translateX(0);}
100% {width:$blockSize*$sizeAdjust;transform:rotateY(-90deg) translateZ((($blockSize * $sizeAdjust) - $blockSize)) translateX((($blockSize * $sizeAdjust) - $blockSize));}
}
@keyframes bottom {
0% {height:$blockSize;transform:rotateX(90deg) translateY(0);top:0;}
100% {height:$blockSize*$sizeAdjust;transform:rotateX(90deg) translateY((($blockSize * $sizeAdjust) - $blockSize));top:-(($blockSize * $sizeAdjust) - $blockSize);}
}
@keyframes top {
0% {height:$blockSize;transform:rotateX(-90deg) translateY(0);}
100% {height:$blockSize*$sizeAdjust;transform:rotateX(-90deg) translateY(-(($blockSize * $sizeAdjust) - $blockSize));}
}
@keyframes front {
0% {transform:translateZ(0);}
100% {transform:translateZ((($blockSize * $sizeAdjust) - $blockSize));}
}
//delay timing
@for $i from 1 to ($col - 1) {
.block:nth-of-type(#{($col - 1)+n+($i - ($col - 1))}) > .face{
animation-delay:($time / $numRules) * $i * $delay
}
}
.block:nth-of-type(#{($col - 1)+n}) > .face {
animation-delay:($time / $numRules) * ($col - 1) * $delay;
}
@for $n from $col to ($numRules + 1) {
.block:nth-of-type(#{($col - 1)+n+"+"+((($col * $n)-($col - 1))-(($col - 1) * $col))}) > .face {
animation-delay:($time / $numRules) * $n * $delay
}
}
.block:nth-of-type(1) {
display:none;
}
View Compiled
This Pen doesn't use any external CSS resources.