<div id="wrap">  
  <div class="boxs">
    <div class="box t1">scale(.5) translate(200px)</div>
    <div class="box t2">translate(200px) scale(.5)</div>   
  </div>
</div>
body{
  font:1em "microsoft Yahei";
}
div{
  box-sizing:border-box;
}
#wrap{
  width:100%;
  padding:1em;
  
}

.box{
  width:200px;
  height:200px;
  margin:15px;
  padding:1em;
  transition:0.2s ease-out;
}
.t1{
  background: #0B9BA9;   
}
.t2{
  background: #D6B572;
}
.t3{
  background: #F46D78;
}

window.onload=function(){
  var aBoxs=document.getElementsByClassName("box");
  var onOff1=false;
  var onOff2=false;
  aBoxs[0].onclick=function(){
    if(!onOff1){
    this.style.transform="scale(.5) translateX(200px)";
    }else{
     this.style.transform="scale(1) translateX(0)";
    }
    onOff1=!onOff1;
  }
    aBoxs[1].onclick=function(){
    if(!onOff2){
    this.style.transform="translate(200px) scale(.5)";
    }else{
     this.style.transform="translate(0) scale(1)";
    }
    onOff2=!onOff2;
  }
      
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.