.div1 {
  width: 300px;
  height: 300px;
  background-color: red;
  /*When you transform, nothing else is effected*/
  /*transform: scale(x, y) only first value given defaults to x */
  transform: scale(0.5);
}

.div2 {
  width: 300px;
  height: 300px;
  background-color: blue;
}

.div2:hover {
  /*translate % happend based on its own size... and not the parent*/
  /* if a div is width 300px.. and if you translate X 300px... the div will move 300px*/
  transform: translateX(300px);
}

.div3 {
  width: 300px;
  height: 300px;
  background-color: yellow;
  transform: rotate(90deg);
}