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

.box{
  width:100px;
  height:100px;
  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(100px) rotate(180deg)";
    }else{
     this.style.transform="scale(1) translateX(0) rotate(0deg) ";
    }
    onOff1=!onOff1;
  }
    aBoxs[1].onclick=function(){
    if(!onOff2){
    this.style.transform="rotate(180deg) translate(100px) scale(.5)";
    }else{
     this.style.transform="rotate(0deg) 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.