SOURCE

<!-- 原创动画 by  confused-->
<div id='flip'>
  <div id='flower-head'>
    	<div id='flower'>
    		<div class='flower'></div>
    		<div class='flower'></div>
   	 		<div class='flower'></div>
    		<div class='flower'></div>
    		<div class='flower'></div>
    		<div class='flower-center'></div>
    </div>
    <div class='root'></div>
  </div>
  <div class='leaf'>
  <div class='leaf leaf-left'></div>
  <div class='leaf leaf-right'></div>
  </div>
  
  <div class='bowl'></div>
</div>

#flip{
  position:absolute;
  left:50%;
  top:50%;
  
}
#flower{
  transform:translate(-5px,0);
}
.flower{
  position:absolute;
    transform-origin:15% 50%; 
  background-color:#529;
  width:80px;
  height:30px;
  border-radius:50%;
  border:1px solid #428;
}
.flower:first-child{

  transform:rotate(72deg);
}
.flower:nth-child(2){
  transform:rotate(144deg);
}
.flower:nth-child(3){
  transform:rotate(216deg);
}
.flower:nth-child(4){
  transform:rotate(288deg);
}
.flower-center{
/*   transform:translate(10%,10%); */
  position:absolute;
  z-index:999;
  background-color:yellow;
  width:30px;
  height:30px;
  border-radius:50%;
}
.leaf{
  position:absolute;
  transform:translate(0,150px);
  transform-origin:5% 50%; 
    background-color:#3f1;
}
.leaf-left{
    width:100px;
  height:40px;
  border-radius:50%;
  transform:rotate(-45deg);
}
.leaf-right{
    width:100px;
  height:40px;
  border-radius:50%;
  transform:rotate(-135deg);
}
.root{
  background-color:green;
  border-radius:100% 0 0 0;
  height:150px;
  width:10px;
}
#flower-head
{
  position:absolute;
  transform-origin:50% 100%;
  transform:rotate(-10deg);
  animation:movehead 3s infinite ease-in-out;
  -webkit-animation:movehead 3s infinite; /* Safari 和 Chrome */
}
@keyframes movehead
{
50%   {transform:rotate(10deg);}
100%  {transform:rotate(-10deg);}
}