- var totalCube = 64
.container
.perspective
- for (var i = 1; i < (totalCube+1);i++)
.translate-cube-shadow
.cube-shadow(id='cube-shadow-'+i)
.cube(id='cube-'+i)
.top
.left
.right
P
a(href="https://codepen.io/verlangieri/") Codepen
span Or
a(href="https://twitter.com/verlangieri_d") twitter
View Compiled
$containerSize: 200px;
$cubeMargin: 10px;
$totalCube: 64;
$col: 8;
$animationHeightCube: 15px;
$animationDuration: 2s;
$delayAnimation: 0.2;
$cubeSize: ($containerSize / ($totalCube / $col));
$facesPosition: ($cubeSize / 2)-0.2;
* {
box-sizing: border-box;
}
html,
body {
background: #52ACE8;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
width: $containerSize;
height: $containerSize;
position: relative;
perspective: 1000px;
left: 50%;
top: 50%;
transform-style: preserve-3d;
transform: translateY(-50%) translateX(-50%);
}
.perspective {
transform: rotateX(60deg) rotateZ(25deg);
transform-style: preserve-3d;
}
.cube, .cube-shadow {
width: $cubeSize;
height: $cubeSize;
transform-style: preserve-3d;
position: absolute;
}
.cube {animation: rotation $animationDuration infinite ease-in-out;}
.translate-cube-shadow {transform: translateZ(-40px);}
.cube-shadow {
background: #4EA5DF;
transform: translateZ(-60px);
animation: scale $animationDuration infinite ease-in-out;
}
.cube div {
width: 100%;
height: 100%;
display: block;
position: absolute;
background: #262626;
}
.cube .right {
background: #EEEEEE;
transform: rotateY(90deg) translateZ($facesPosition);
}
.cube .top {
background: #FAFAFA;
transform: rotateX(0deg) translateZ($facesPosition);
}
.cube .left {
background: #E0E0E0;
transform: rotateX(-90deg) translateZ($facesPosition);
}
@keyframes rotation {
0% {transform: translateZ(0px);}
50% {transform: translateZ($animationHeightCube);}
100% {transform: translateZ(0px);}
}
@keyframes scale {
0% {transform: scale(1)}
50% {transform: scale(0.75)}
100% {transform: scale(1)}
}
$columns: ($totalCube / $col) - 1;
$cubeI: 0;
$delayI: 0;
@for $y from 0 through $columns {
$delayI: $y;
@for $x from 0 through $columns {
$cubeI: $cubeI+1;
$delayI: $delayI+1;
#cube-#{$cubeI}, #cube-shadow-#{$cubeI} {
left: $x * ($cubeSize + $cubeMargin);
top: $y * ($cubeSize + $cubeMargin);
animation-delay: ($delayAnimation * $delayI)+s;
}
}
}
/*---------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script:700);
p {
font-family: 'dancing script', sans-serif;position: fixed;left: 0;right: 0;bottom: 20px;margin: 0 auto;width: 280px;
text-align: center;font-size: 12px;}
a {font-family: 'open sans', sans-serif;color: #418ABB;text-transform: uppercase;text-decoration: none;}
span {font-size: 20px;margin: 0 10px;color:#FFF}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.