魔術方塊

index.jade

.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)

style.scss

@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));
  }
}

魔術方塊.markdown

魔術方塊

A Pen by Dino Wang on CodePen.

Inspired by Amos Lee.

License.