- sidex = 5
- sidey = 5
- sizes = 4
- colors = 7

%input{:type => "radio",:checked=>"checked", :name=>"tool", :value=>"size-tool-up", :id=>"size-tool-up"}
%input{:type => "radio", :name=>"tool", :value=>"size-tool-down", :id=>"size-tool-down"}
  
- (1..colors).each do |c|
  %input{:type => "radio", :name=>"tool", :value=>"#{c}", :id=>"c#{c}-tool"}
  
- (1..sidex).each do |i|
  - (1..sidey).each do |j|
    %input{:type => "radio", :name=>"l#{i}i#{j}", :checked=>"checked", :value=>"0", :id=>"l#{i}i#{j}s0"}
    %input{:type => "radio", :name=>"l#{i}i#{j}color", :checked=>"checked", :value=>"1", :id=>"l#{i}i#{j}c1"}    
    - (1..sizes).each do |s|
      %input{:type => "radio", :name=>"l#{i}i#{j}", :value=>"#{s}", :id=>"l#{i}i#{j}s#{s}"}      
    - (2..colors).each do |c|
      %input{:type => "radio", :name=>"l#{i}i#{j}color", :value=>"#{c}", :id=>"l#{i}i#{j}c#{c}"}

.toolbar
  %label{:class => "tool",:for=>"size-tool-up"}
  %label{:class => "tool",:for=>"size-tool-down"}   
  - (1..colors).each do |c|
    %label{:class => "tool color-tool c#{c}-tool",:for=>"c#{c}-tool"} 
.turn-grid.turn-left 
.turn-grid.turn-right
.world-grid
  - (1..sidex).each do |i|
    .world-line
      - (1..sidey).each do |j|
        %label{:for=>"l#{i}i#{j}s0", :class=>"world-item size-0"}
          - (1..sizes).each do |s|
            %label{:for=>"l#{i}i#{j}s#{s}", :class=>"world-item size-#{s}"}
          - (1..colors).each do |c|
            %label{:for=>"l#{i}i#{j}c#{c}", :class=>"world-item color-#{c}"}
View Compiled
$sidex : 5;
$sidey : 5;
$sizes : 4;
$colorsnumber : 7;
$colors: (
    (#8D6E63 #795548 #6D4C41 1),
    (#66BB6A #4CAF50 #43A047 1),
    (#66BB6A #795548 #6D4C41 1),
    (#78909C #607D8B #546E7A 1),
    (#43A047 #607D8B #546E7A 1),
    (#FAFAFA #F5F5F5 #EEEEEE 1),
    ( rgba(38, 198, 218, 0.8) rgba(0, 172, 193, 0.8) rgba(38, 198, 218, 0.8) 1),
);

body {
  min-height: 100vh;
  background: linear-gradient(to bottom, #cee7d4 0%, #f5f4c9 100%);
  overflow: hidden;
}
input{
  position:absolute;
  left:-9999px;
}
.hidden-label{   
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transform: translateZ(-0.5rem);
  width: 2.5rem;
  height: 2.5rem;
  left: 0.25rem;
  top: 0.25rem;
  pointer-events : none;
}
.clickable-label{
   z-index:2;    
   transform: translateZ(0.1rem);
   width: 3.1rem;
   height: 3.1rem;
   left: -0.05rem;
   top: -0.05rem;
   pointer-events : inherit;
}
.clickable-label-down,
.clickable-label-color{
   z-index:3;    
   transform: translateZ(0.2rem);
   width: 3.2rem;
   height: 3.2rem;
   left: -0.1rem;
   top: -0.1rem;
   pointer-events : inherit;
}
%extend_1 {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -1.5rem;
	margin-left: -1.5rem;
	height: 3rem;
	width: 3rem;
	border-left: 1rem solid #fff;
	border-top: 1rem solid #fff;
	left: 50%;
	transform: rotate(-45deg);
  &:hover{
    border-color:#000;
  }
}


.turn-grid {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15rem;
	&.turn-left {
		left: 0;
		&:before {
			@extend %extend_1;
		}
		&:hover ~ .world-grid {
			transform: translateY(-50%) translateX(-50%) rotateX(65deg) rotateZ(0deg);
		}
	}
	&.turn-right {
		right: 0;
		&:after {
			@extend %extend_1;
	    transform: rotate(135deg);
		}
		&:hover ~ .world-grid {
			transform: translateY(-50%) translateX(-50%) rotateX(65deg) rotateZ(90deg);
		}
	}
}
.toolbar {
    position: absolute;
    z-index:4;
    top: 0;
    height: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem;
    background: #272525;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);    
    white-space: nowrap;
    transform-style: flat;
  .tool {
    display: inline-block;
    transition:200ms ease all;
    height: 2rem;
    width: 2rem;
    margin: 0 0.25rem;
    border-radius: 50%;
    cursor: pointer;
    &:first-child + .tool{
      margin-right: 3rem;
    }
    &.color-tool{
      border-radius:0;
      margin: 0 0.5rem;
      position:relative;
      transform-style: preserve-3d;
      transition:200ms ease all;
      cursor: pointer;
      z-index: 1;
      transform: translateY(-50%) translateX(-50%) rotateX(65deg) rotateZ(45deg);
      &:before{
        content:'';
        position:absolute;
        background:#6D4C41;
        left:100%;
        top:0;
        height:100%;
        width:100%;
        transform-origin: 0%;
        transform: rotateY(90deg);
        transition:200ms ease all;
      }
      &:after{
        content: '';
        position: absolute;
        background: #795548;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        transform: rotateX(90deg);
        transform-origin: 0 100%;
        transition:200ms ease all;
      }      
    }
    &[for*="size-tool"] {
        position: relative;        
        &:before{
          content: '';
          position: absolute;
          left: 0.75rem;
          bottom: 0.25rem;
          width: 0.5rem;
          height: 1rem;
          background: #fff;
        }
        &:after {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0.25rem;
            border-bottom: 0.75rem solid #fff;
            border-left: 0.5rem solid transparent;
            border-right: 0.5rem solid transparent;
        }
      &[for*="size-tool-down"]{
        &:before{
          top:0.25rem;
          bottom:inherit;
        }
        &:after {
            content: '';
            position: absolute;
            left: 0.5rem;
            top:inherit;
            bottom: 0.25rem;
            border-bottom:none;
            border-top: 0.75rem solid #fff;
            border-left: 0.5rem solid transparent;
            border-right: 0.5rem solid transparent;
        }
      }
    }
    @for $c from 1 to $colorsnumber+1 {
      &.c#{$c}-tool{
        background: nth( nth( $colors, $c ),1) ;
        opacity: nth( nth( $colors, $c ),4) ;
        &:before{
          background: nth( nth( $colors, $c ),3) ;
        }
        &:after{
          background: nth( nth( $colors, $c ),2) ;
        }
      }
    }
  }
}

.world-grid{
  position:absolute;
  left:50%;
  top:50%;
  transform: translateY(-50%) translateX(-50%) rotateX(65deg) rotateZ(45deg);
font-size:0;
  transform-style: preserve-3d;
  transition: 1000ms ease all;    
  white-space: nowrap;
  &:after{
    content:'';
    position:absolute;
    background:none;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform:translateZ(-3rem);
    box-shadow: 0 0 4rem 3rem rgba(0, 0, 0, 0.25);
    background: rgba(0,0,0,0.25);
  }
  .world-line{    
    transform-style: preserve-3d;
  }
  .world-item{
    width:3rem;
    height:3rem;
    background:#8D6E63;
    display:inline-block;
    position:relative;
    transform-style: preserve-3d;
    transition:200ms ease all;
    cursor: pointer;
    z-index: 1;
    &:before{
      content:'';
      position:absolute;
      background:#6D4C41;
      left:100%;
      top:0;
      height:100%;
      width:100%;
      transform-origin: 0%;
      transform: rotateY(90deg);
      transition:200ms ease all;
    }
    &:after{
      content: '';
      position: absolute;
      background: #795548;
      left: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      transform: rotateX(90deg);
      transform-origin: 0 100%;
      transition:200ms ease all;
    }
    &:hover, &:hover:after, &:hover:before {
        box-shadow: inset 0 0 0 3rem rgba(0, 0, 0, 0.25);
    }    
    @for $s from 0 through $sizes{
       @if $s > 0 {
           .size-#{$s}{      
             @extend .hidden-label;
          }
       }
    }  
    @for $c from 1 through $colorsnumber+1{
      .color-#{$c}{      
         @extend .hidden-label;
      }
    }
  }
}

.selected-tool{
  box-shadow : 0 0 0 1px #fff;
  &.color-tool:before{
    box-shadow : 0 0 0 1px #fff;
  }
  &.color-tool:after{
    box-shadow : 0 0 0 1px #fff;
  }
}
#size-tool-up:checked ~ .toolbar .tool[for=size-tool-up]{
  @extend .selected-tool;
}
#size-tool-down:checked ~ .toolbar .tool[for=size-tool-down]{
  @extend .selected-tool;
}
@for $c from 1 through $colorsnumber+1{
  #c#{$c}-tool:checked ~ .world-grid .world-line .world-item{
    .color-#{$c}{      
        @extend .clickable-label-color;
        &:before{
          width: 100% + ($sizes*100%);
        }
        &:after{
          height: 100% + ($sizes*100%);
        }
    }
  }
  #c#{$c}-tool:checked ~ .toolbar .c#{$c}-tool{
    @extend .selected-tool;
    box-shadow: -1px -1px 0 1px #fff;
  }
}



@for $i from 1 through $sidex{  
  @for $j from 1 through $sidey{    
    @for $c from 1 to $colorsnumber+1 {
      #l#{$i}i#{$j}c#{$c}:checked ~ .world-grid .world-item[for="l#{$i}i#{$j}s0"]{
         background: nth( nth( $colors, $c ),1);
        @if nth( nth( $colors, $c ),4) < 1{
          @keyframes water {
            0%{
            background-position: 0% 0%;
            }
            50%{
            background-position: 100% 100%;
            }
            100%{
            background-position: 0% 0%;
            }
          }          
          background :  radial-gradient(ellipse at center, nth( nth( $colors, $c ),1) 0%,nth( nth( $colors, $c ),3) 58%,nth( nth( $colors, $c ),1) 100%);
          background-size: 20%;
          animation-duration: 5s;
          animation-name: water;
          animation-iteration-count: infinite;
        }else{
        }
        opacity : nth( nth( $colors, $c ),4) ;
        &:after{
          background: nth( nth( $colors, $c ),2);
        }
        &:before{
          background: nth( nth( $colors, $c ),3);
        }
      }
    }
    @for $s from 0 through $sizes{ 
     #l#{$i}i#{$j}s#{$s}:checked ~ .world-grid .world-item[for="l#{$i}i#{$j}s0"]{
        $trs: ($s*3);
        transform:translateZ(#{$trs}rem);
       &:before{
         $width: 100% + ($s*100%);
         width: $width;
       }
       &:after{
         $height: 100% + ($s*100%);
         height: $height;
       }
      }
    }
    @for $s from 0 through $sizes{ 
     #size-tool-up:checked ~ #l#{$i}i#{$j}s#{$s}:checked ~ .world-grid .world-item[for="l#{$i}i#{$j}s0"]{
       
       .size-#{$s + 1}:before{
         $width: 100% + ($s*100%);
         width: $width;
       }
       .size-#{$s + 1}:after{
         $height: 100% + ($s*100%);
         height: $height;
       }
       .size-#{$s + 1}{
         @extend .clickable-label;
       }
      }
    }
    @for $s from 0 through $sizes{ 
     #size-tool-down:checked ~ #l#{$i}i#{$j}s#{$s}:checked ~ .world-grid .world-item[for="l#{$i}i#{$j}s0"]{
       
       .size-#{$s - 1}:before{
         $width: 100% + ($s*100%);
         width: $width;
       }
       .size-#{$s - 1}:after{
         $height: 100% + ($s*100%);
         height: $height;
       }
       .size-#{$s - 1}{
         @extend .clickable-label-down;
       }
      }
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.