Edit in JSFiddle

<div class="parkun">
  <div class="eye left_eye">◉</div>
  <div class="eye right_eye">◉</div>
</div>
<div class="par1">.</div>
<div class="par2">.</div>
<div class="par3">.</div>

div.par1, div.par2, div.par3{
  background: #FFD700;
  border-radius: 20px;
  width:60px;
  height:18px;
  -webkit-transition:3s ease-in-out;
  -webkit-transform-origin: 100% 0%;
  transition:3s ease-in-out;
  transform-origin: 100% 0%;
 position: absolute;
 margin-top: 60px;
 color: #FFD700;

}
div.par2{
  margin-left:20px;
  position: absolute;
}
div.par3{
  margin-left:40px;
  position: absolute;
}
div.parkun{
  width:150px;
  height:80px;
  position: absolute;
  background: #FFD700;
  border-top-left-radius:60px;
  border-top-right-radius:60px;
  margin-top: 58px;
}
.eye{
  font-size:80px;
  margin-top:8px;
  margin-left:18px;
  float:left;
  width:50px;
  height:50px;
  float:relative;
}
.right_eye{
  float:left;
}
 div.parkun:hover + div.par1{
  -webkit-transform: translate(0px) rotate(65deg);
  transform: translate(0px) rotate(65deg);
  background-color: #FFD700;
} 
div.parkun:hover ~ div.par2{
  -webkit-transform: translate(0px) rotate(90deg);
	transform: translate(0px) rotate(90deg);
  background-color: #FFD700;
}
div.parkun:hover ~ div.par3{
  -webkit-transform: translate(0px, 5px) rotate(115deg);
	transform: translate(0px, 5px) rotate(115deg);
  background-color: #FFD700;
}