A Pen by Dino Wang on CodePen.
Inspired by Amos Lee.
.container | |
.origin | |
each layer in [1, 2, 3] | |
each row in [1, 2, 3] | |
each col in [1, 2, 3] | |
div(class='cube layer' + layer + ' r' + row + ' c' + col) | |
each surface in ['front', 'back', 'left', 'right', 'top', 'bottom'] | |
div(class='surface ' + surface) |
@import "compass/css3"; | |
$box-width: 100px; | |
$box-half-width: $box-width / 2; | |
$box-gutter: 25px; | |
@mixin keyframes($name) { | |
@-webkit-keyframes #{$name} { @content; } | |
@-moz-keyframes #{$name} { @content; } | |
@-ms-keyframes #{$name} { @content; } | |
@-o-keyframes #{$name} { @content; } | |
@keyframes #{$name} { @content; } | |
} | |
@mixin animation($str) { | |
-webkit-animation: #{$str}; | |
-moz-animation: #{$str}; | |
-ms-animation: #{$str}; | |
-o-animation: #{$str}; | |
animation: #{$str}; | |
} | |
@mixin transition($args...) { | |
-webkit-transition: $args; | |
-moz-transition: $args; | |
-ms-transition: $args; | |
-o-transition: $args; | |
transition: $args; | |
} | |
%abs-center { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
margin: auto; | |
} | |
body { | |
padding: 0; | |
margin: 0; | |
overflow: hidden; | |
} | |
.container { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
@include perspective(600px); | |
.origin { | |
@extend %abs-center; | |
@include transform-style(preserve-3d); | |
@include animation(rotate-central 10s linear infinite forwards); | |
.cube { | |
@extend %abs-center; | |
width: $box-width; | |
height: $box-width; | |
} | |
} | |
} | |
.cube { | |
@include transform-style(preserve-3d); | |
.surface { | |
@extend %abs-center; | |
width: $box-width; | |
height: $box-width; | |
outline: solid 1px transparent; | |
@include transform-style(preserve-3d); | |
$transparent: .3; | |
&.front { | |
background: rgba(255,0,0,$transparent); | |
@include transform(rotateY(0deg) translateZ($box-half-width)); | |
} | |
&.left { | |
background: rgba(0,255,0,$transparent); | |
@include transform(rotateY(-90deg) translateZ($box-half-width)); | |
} | |
&.back { | |
background: rgba(0,0,255,$transparent); | |
@include transform(rotateY(180deg) translateZ($box-half-width)); | |
} | |
&.right { | |
background: rgba(255,0,255,$transparent); | |
@include transform(rotateY(90deg) translateZ($box-half-width)); | |
} | |
&.top { | |
background: rgba(255,255,0,$transparent); | |
@include transform(rotateX(90deg) translateZ($box-half-width)); | |
} | |
&.bottom { | |
background: rgba(0,255,255,$transparent); | |
@include transform(rotateX(-90deg) translateZ($box-half-width)); | |
} | |
} | |
@for $layer from 1 through 3 { | |
$z: 0; | |
@if $layer == 1 { $z: -1; } | |
@if $layer == 3 { $z: 1; } | |
@for $r from 1 through 3 { | |
$y: 0; | |
@if $r == 1 { $y: -1; } | |
@if $r == 3 { $y: 1; } | |
@for $c from 1 through 3 { | |
$x: 0; | |
@if $c == 1 { $x: -1; } | |
@if $c == 3 { $x: 1; } | |
&.layer#{$layer}.r#{$r}.c#{$c} { | |
@include transform( | |
translateX($x * ($box-width + $box-gutter)) | |
translateY($y * ($box-width + $box-gutter)) | |
translateZ($z * ($box-width + $box-gutter)) | |
); | |
} | |
} | |
} | |
} | |
} | |
@include keyframes(rotate-central) { | |
0% { | |
@include transform(rotateX(0deg) rotateY(0deg)); | |
} | |
100% { | |
@include transform(rotateX(360deg) rotateY(360deg)); | |
} | |
} |