マウスオーバーで丸を拡大して文字を斜めにしています。
transform: rotate(-10deg) scale(1.5);
↑回転と拡大を指定。
transition: 0.2s;
↑マウスオーバー時のアニメーション
HTMl
<div class="mod_navi ex_en"> <ul> <li class="navi01"><a href="#">News</a></li> <li class="navi02"><a href="#">Work</a></li> <li class="navi03"><a href="#">Profile</a></li> <li class="navi04"><a href="#">Blog</a></li> <li class="navi05"><a href="#">Events</a></li> </ul> <!--mod_navi_end--></div>
CSS
.mod_navi{ width:940px; min-height:250px; height:auto!important; height:250px; position:relative; background:transparent url('img/navibk.jpg') no-repeat scroll; } .mod_navi li a:link, .mod_navi li a:visited { width: 7em; height: 7em; display: block; color: #FFF; text-align: center; line-height: 7em; font-weight: bold; -webkit-border-radius: 7em; -moz-border-radius: 7em; border-radius: 7em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.7; background-color: #659A0E; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .mod_navi li a:hover, .mod_navi li a:active { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; text-decoration: none; -webkit-transform: rotate(-10deg) scale(1.5); -moz-transform: rotate(-10deg) scale(1.5); -o-transform: rotate(-10deg) scale(1.5); -ms-transform: rotate(-10deg) scale(1.5); transform: rotate(-10deg) scale(1.5); -ms-transorm: rotate(-10deg) scale(1.5) } .mod_navi li.navi01{ position:absolute; top:150px; left:100px; } .mod_navi li.navi02{ position:absolute; top:100px; left:250px; } .mod_navi li.navi03{ position:absolute; top:50px; left:400px; } .mod_navi li.navi04{ position:absolute; top:120px; left:550px; } .mod_navi li.navi05{ position:absolute; top:80px; left:700px; }