body{
  width:500px;
  margin: 1% auto;
}

/* div with background */
.box {
  margin: 1rem;
  background:blue;
  width: 150px;
  height: 150px;
  color:#fff;
  float: left;
  transition: transform 1s;
}
.box2{
  background: tomato;
  /* changin the origin to right bottom corner of the element */
  transform-origin: right bottom;
}

.box:hover{
    transform: rotate(45deg);
}