<div id="wrap">  
  <div class="boxs">
    <div class="box t1">点击水平移动200px</div>
    <div class="box t2">点击纵向移动150px</div>
    <div class="box t3">点击水平纵向移动200px,150px</div>  
  </div>
</div>
body{
  font:1em "microsoft Yahei";
}
div{
  box-sizing:border-box;
}
#wrap{
  width:100%;
  padding:1em;
}

.box{
  width:200px;
  height:150px;
  float:left;
  margin-right: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;
  var onOff3=false;
  aBoxs[0].onclick=function(){
    if(!onOff1){
    this.style.transform="translateX(200px)";
    }else{
     this.style.transform="translateX(0)";
    }
    onOff1=!onOff1;
  }
    aBoxs[1].onclick=function(){
    if(!onOff2){
    this.style.transform="translateY(150px)";
    }else{
     this.style.transform="translateY(0)";
    }
    onOff2=!onOff2;
  }
    aBoxs[2].onclick=function(){
    if(!onOff2){
    this.style.transform="translate(200px,150px)";
    }else{
     this.style.transform="translate(0)";
    }
    onOff2=!onOff2;
  }

  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.