HTML<ul class="abanico"><li><a>Inicio</a></li> <li><a>Amor</a></li> <li><a>Paz</a></li> <li><a>Abundancia</a></li>   <li><a>Humor</a></li> <li><a>Felicidad</a></li> </ul>

CSSul.abanico {
 position: relative;
 width: 500px;
 height: 300px;
 margin: 40px auto;
 list-style: none;
 font: normal 16px "arial narrow", sans-serif;
 }
 ul.abanico li {
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 100px;
 height: 300px;
 background: orange;
 margin-left: -50px;
 line-height: 300px;
 text-align: center;
 -moz-transform-origin: top center;
 -webkit-transform-origin: top center;
 transform-origin: top center;
 -moz-transition: all .4s ;
 -webkit-transition: all .4s ;
 transition: all .4s ;
 }
 ul.abanico li a {
 display: inline-block;
 width: 100px;
 height: 48px;
 text-decoration: none;
 color: white;
 line-height: 40px;
 vertical-align: bottom;
 }
 ul.abanico:hover li {
 opacity: 1;
 }
 ul.abanico:hover li:nth-of-type(6) {
 opacity: 0;
 }
 ul.abanico:hover li:nth-of-type(1) {
 background: green;
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 }
 ul.abanico:hover li:nth-of-type(2) {
 background: blue;
 -moz-transform: rotate(22deg);
 -webkit-transform: rotate(22deg);
 transform: rotate(22deg);
 }
 ul.abanico:hover li:nth-of-type(3) {
 background: purple;
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 ul.abanico:hover li:nth-of-type(4) {
 background: red;
 -moz-transform: rotate(-22deg);
 -webkit-transform: rotate(-22deg);
 transform: rotate(-22deg);
 }
 ul.abanico:hover li:nth-of-type(5) {
 background: orange;
 -moz-transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg); 
 transform: rotate(-45deg);
 }