transformとtransitionを使った丸いナビゲーション

デモページへopen_in_new

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;
}