body{
  background: #333;
}

h1{
  text-align: center;
  line-height: 300px;
  vertical-align: middle;
  font-family: Arial, Helvetica, sans-serif;
}

.box{
  background: white;
  width: 300px;
  height: 300px;
  position: relative;
  margin: auto;
  top: 200px;
  color: red;

  /*transition-property: background, border-radius, color;*/
  transition-property: all;
  transition-duration: 1s;
}

.box:hover{
  background: blue;
  border-radius: 50%;
  color: white;
  transform: rotateY(180deg);
}