<div class="container">
  <div class="box rotate"></div>
</div>
.box {
  margin: 50px auto;
  background: #5FCF80;
  width: 150px;
  height: 150px;
}

.box:hover {
  -webkit-transform: rotate(360deg);
  background: #9351A6;
  border-radius: 50%;
}

.rotate {
  -webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.rotate:hover {
  -webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.