body {
  padding: 64px;
}

.box1 {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

  transition-property: transform;
  transition-duration: 1s; 
}

.box1:hover {
  transform: rotate(180deg);
}

.box2 {
  width: 50px;
  height: 50px;
  background: pink;

  transition-property: transform;
  transition-duration: 1s; 
}

.box2:hover {
  transform: scale(2, .5);
  /* 横に2倍、縦に0.5倍という指示 */
  /* 「0.5」は「.5」と表記することができます。 */
}

.box3 {
  width: 50px;
  height: 50px;
  background: greenyellow;

  transition-property: transform;
  transition-duration: 1s; 
}

.box3:hover {
  transform: translateX(200px) rotate(70deg);
}

.box4 {
  width: 50px;
  height: 50px;
  background: tomato;

  transition-property: transform;
  transition-duration: 1s; 
}

.box4:hover {
  transform: rotate(70deg) translateX(200px) ;
}