h1 Css3 Transform
// Rotate
.card
  .box.rotate
    .fill
  p rotate(45deg)  
.card
  .box.rotateX
    .fill
  p rotateX(45deg)
.card
  .box.rotateY
    .fill
  p rotateY(45deg)
.card
  .box.rotateZ
    .fill
  p rotateZ(45deg)  
// scale
.card
  .box.scale
    .fill
  p scale(2)
.card
  .box.scaleX
    .fill
  p scaleX(2)    
.card
  .box.scaleY
    .fill
  p scaleY(2)    
// skew
.card
  .box.skew
    .fill
  p skew(45deg, 45deg)  
.card
  .box.skewX
    .fill
  p skewX(45deg)
.card
  .box.skewY
    .fill
  p skewY(45deg)
// translate
.card
  .box.translate
    .fill
  p translate(45px)  
.card
  .box.translateX
    .fill
  p translateX(45px)
.card
  .box.translateY
    .fill
  p translateY(45px)
.card
  .box.matrix
    .fill
  p  matrix(2, 2, 0, 2, 45, 0)
h4 Perspective : 100
.perspective-100
  .card
    .box.rotateX
      .fill
    p rotateX(90deg)
  .card
    .box.rotateY
      .fill
    p rotateY(45deg)
h4 Perspective : 200
.perspective-200
  .card
    .box.rotateX
      .fill
    p rotateX(90deg)
  .card
    .box.rotateY
      .fill
    p rotateY(45deg)
// transform origin
h2 Transform origin
.card
  .box.rotate
    .fill.to-100-0-0
  p
    | transform-origin : 100% 0 0  
    br
    | rotate(45deg)
.card
  .box.rotate
    .fill.to-0-100-0
  p
    | transform-origin : 0 100%  0
    br
    | rotate(45deg)
.card.perspective-200
  .box.rotateX
    .fill.to-0-100-0
  p
    | transform-origin : 0 100%  0
    br
    | rotateX(45deg)
.card.perspective-200
  .box.rotateX
    .fill.to-100-0-0
  p
    | transform-origin : 0 100%  0
    br
    | rotateX(45deg)
.card.perspective-200
  .box.rotateY
    .fill.to-0-100-0
  p
    | transform-origin : 0 100%  0 
    br
    | rotateY(45deg)
.card.perspective-200
  .box.rotateY
    .fill.to-100-0-0
  p
    | transform-origin : 100%  0 0
    br
    | rotateY(45deg)
.card
  .box.scale
    .fill.to-100-0-0
  p
    | transform-origin : 100%  0 0
    br
    | scale(2)
.card
  .box.scale
    .fill.to-0-100-0
  p
    | transform-origin : 0 100%  0
    br
    | scale(2)
.card
  .box.scaleX
    .fill.to-100-0-0
  p
    | transform-origin : 100%  0 0
    br
    | scaleX(2)
.card
  .box.scaleX
    .fill.to-0-100-0
  p
    | transform-origin : 0 100%  0
    br
    | scaleX(2)
.card
  .box.scaleY
    .fill.to-100-0-0
  p
    | transform-origin : 100%  0 0
    br
    | scaleY(2)
.card
  .box.scaleY
    .fill.to-0-100-0
  p
    | transform-origin : 0 100%  0
    br
    | scaleY(2)

@import "compass";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800);
*, *:after, *:before{
  @include box-sizing(border-box);
}
body{
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
h1{
  color: #4c4c4c;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}

h2, h4{
  font-weight: 400;
  color: #4d4d4d;
}
.card{
    display: inline-block;
    margin: 10px;
    background: #fff;
    padding: 15px;
    min-width: 200px;
    @include box-shadow(0 3px 5px #ddd);
    color: #555;
  
  .box{
    width: 100px;
    height: 100px;
    margin: auto;
    background: #ddd;
    cursor: pointer;
    box-shadow: 0 0 5px #ccc inset;
   
    
    
    .fill{
      width: 100px;
      height: 100px;
      position: relative;
      background: #03A9F4;
      opacity: .5;
      @include box-shadow(0 0 5px #ccc);
      @include transition(.3s);
    } 
  }
  
  p{
    margin:25px 0 0;
  }
}


 .rotate:hover{
      .fill{
        @include rotate(45deg)
      }
}
.rotateX:hover{
      .fill{
        @include rotateX(45deg)
      }
}
.rotateY:hover{
      .fill{
        @include rotateY(45deg)
      }
}
.rotateZ:hover{
      .fill{
        @include rotateZ(45deg)
      }
}

.scale:hover{
      .fill{
        @include scale(2)
      }
}
.scaleX:hover{
      .fill{
        @include scaleX(2)
      }
}
.scaleY:hover{
      .fill{
        @include scaleY(2)
      }
}

.skew:hover{
      .fill{
        @include skew(45deg, 45deg)
      }
}
.skewX:hover{
      .fill{
        @include skewX(45deg)
      }
}
.skewY:hover{
      .fill{
        @include skewY(45deg)
      }
}
.translate:hover{
      .fill{
        @include translate(45px)
      }
}
.translateX:hover{
      .fill{
        @include translateX(45px)
      }
}
.translateY:hover{
      .fill{
        @include translateY(45px)
      }
}
.matrix:hover{
      .fill{
        @include transform(matrix(2, 2, 0, 2, 45, 0));
      }
}
.perspective-100{
  .box{
    @include perspective(100px)
  }
}
.perspective-200{
  .box{
    @include perspective(200px)
  }
}
.to-100-0-0{
    transform-origin: 100% 0 0;
}
.to-0-100-0{
    transform-origin:0 100% 0;
}