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

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

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.