CSS Scale Transition

index.html

<button id="open">open</button>
<div class="box scale">
  <h1>
  hey
  </h1>
</div>

index.js

// http://jsfiddle.net/decru76v/4/
var isOpen = false
$("#open").click(function(e){
  var scale = isOpen ? 0 : 1
  $(".scale")
  	.css('transform', `scale(${scale})`)  	
    .css('top', this.offsetBottom)  	
    .css('left', this.getBoundingClientRect().right)

  isOpen = !isOpen	
})

style.css

body{
  margin-top:25px;  
  margin-left:25px;  
}

.box{
  width:100px;
  height:100px;
  background:red;
}

.scale{
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  transform-origin: left top;
  transform: scale(0.0);
  position: absolute;
}