<div class="box1">BOX.1</div>
<div class="box2">BOX.2</div>
body {
  padding: 64px;
}

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

  transition-property: transform;
  transition-duration: 1s; 
  transform-origin: bottom right;
}

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

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

  transition-property: transform;
  transition-duration: 1s; 
  transform-origin: top left;
}

.box2:hover {
  transform: rotate(90deg);
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.