<!-- 1.hover-moving-box는 가장 바깥의 파란색 배경 상자입니다. -->
<h3>rotate</h3>
<div class="hover-moving-box b01">
  <!--  2. box는 캐릭터 이미지를 담고 있는 상자입니다.  -->
  <div class="box">
    <!--  3. 이미지를 불러옵니다.   -->
    <img src="http://report.stibee.com/images/report2016/o-face_2@2x.png" width="150">
  </div>
</div>

<h3>translate</h3>
<div class="hover-moving-box b02">
  <div class="box">
    <img src="http://report.stibee.com/images/report2016/o-face_2@2x.png" width="150">
  </div>
</div>

<h3>scale</h3>
<div class="hover-moving-box b03">
  <div class="box">
    <img src="http://report.stibee.com/images/report2016/o-face_2@2x.png" width="150">
  </div>
</div>

/* 1.hover-moving-box는 가장 바깥의 파란색 배경 상자입니다. */
.hover-moving-box {
  width:100%;
  height:300px;
  position:relative;
  background: #4c6ef5;
}

/* 2. box는 캐릭터 이미지를 담고 있는 상자입니다. */
/* 3. 이 상자에는 transition이라는 속성이 설정되어 있습니다. */
.hover-moving-box .box {
  width: 100px;
  height: 100px;
  color:#fff;
  text-align:center;
  position: absolute;
  top:80px;
  left:10%;
  transition: all 2s ease;
}

/* 4.:hover, 즉 마우스오버를 하면 80%만큼 이동을 합니다. */
.b01:hover .box {
  transform:rotate(360deg);
}

/* 5.:hover하면 x축으로 100px, y축으로 50px만큼 움직입니다. */
.b02:hover .box {
  transform:translate(100px, 50px);
}

/* 6.:hover하면 가로 1.5배, 세로 1.5배 커집니다. */
.b03:hover .box {
  transform:scale(1.5, 2);
}