Free Photos
WordPress Themes

Cubes Experiment (n)

HAML
.wrapper - (1..36).each do |i| .cube .front .back .top .bottom .left .right
SCSS
$faces : 6; $face: #555; $cubes: 36; $bg: #652aa3; $p: #bb197e; $o: #da983c; body{ perspective: 800px; perspective-origin: 50% 100px; position:relative; height:100vh; width:100vw; background:radial-gradient(circle at center, $bg, darken($bg, 20%)); .wrapper{ width:300px; height:300px; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); animation:rotate 18s ease-in-out infinite; @keyframes rotate{ 0%{ transform:translateX(-50%) translateY(-50%) rotate(0deg); background:$p; } 25%{ transform:translateX(-50%) translateY(-50%) rotate(0deg); } 50%{ transform:translateX(-50%) translateY(-50%) rotate(90deg); background:$o; } 75%{ transform:translateX(-50%) translateY(-50%) rotate(90deg); } 100%{ transform:translateX(-50%) translateY(-50%) rotate(0deg); background:$p; } } } .cube { display:block; float:left; position: relative; width: 50px; height:50px; transform-style: preserve-3d; z-index:2; animation:twistnshout 6s ease-in-out infinite alternate; @keyframes twistnshout{ 0%{ transform:rotateX(0deg) rotateY(0deg); } 25%{ transform:rotateX(90deg) rotateY(90deg); } 75%{ transform:rotateX(90deg) rotateY(90deg); } 100%{ transform:rotateX(0deg) rotateY(0deg); } } @for $i from 1 through $cubes { &:nth-child(#{$i}){ animation-delay:#{$i / 10}s; } } div{ position: absolute; width: 50px; height: 50px; @for $i from 1 through $faces { &:nth-child(#{$i}){ animation:facecolor#{$i} 6s ease-in-out infinite; @keyframes facecolor#{$i}{ 0%{ background:lighten($p, $i * 5); } 50%{ background:$o; } 100%{ background:lighten($p, $i * 5); } } } } } .back { transform: translateZ(-25px) rotateY(180deg); } .right { transform: rotateY(-270deg) translateX(25px); transform-origin: top right; } .left { transform: rotateY(270deg) translateX(-25px); transform-origin: center left; } .top { transform: rotateX(-90deg) translateY(-25px); transform-origin: top center; } .bottom { transform: rotateX(90deg) translateY(25px); transform-origin: bottom center; } .front { transform: translateZ(25px); } } }
JAVASCRIPT
Expand for more options Login