#kategori{-webkit-box-shadow:1px 2px 5px #333;

-moz-box-shadow:1px 2px 5px #333;-moz-border-radius: 15px;

-webkit-border-radius: 15px;

margin:0 auto;

height:300px;

width:300px;

overflow:hidden;

position:relative;

background:#333;

}

#kategori ul,

#kategori li{

kategori-style:none;

margin:0;

padding:0;

}

#kategori a{line-height:1;

position:absolute;

text-decoration: none;

color:#666;

}

#kategori a:hover{

color:#ccc;text-shadow:1px 1px 3px red;

}

#kategori:hover{-webkit-box-shadow: 1px 0px 44px blue;

-moz-box-shadow: 1px 0px 44px blue;}

<script type="text/javascript">/*<![CDATA[*/

$(document).ready(function(){

var element = $('#kategori a');;

var offset = 0;

var stepping = 0.3;

var kategori = $('#kategori');

var $kategori = $(kategori)

$kategori.mousemove(function(e){

var topOfkategori = $kategori.eq(0).offset().top

var kategoriHeight = $kategori.height()

stepping = (e.clientY - topOfkategori) / kategoriHeight * 0.2 - 0.1;

});

for (var i = element.length - 1; i >= 0; i--)

{

element[i].elemAngle = i * Math.PI * 2 / element.length;

}

setInterval(render, 500);

function render(){

for (var i = element.length - 1; i >= 0; i--){

var angle = element[i].elemAngle + offset;

x = 120 + Math.sin(angle) * 30;

y = 45 + Math.cos(angle) * 40;

size = Math.round(40 - Math.sin(angle) * 40);

var elementCenter = $(element[i]).width() / 2;

var leftValue = (($kategori.width()/2) * x / 100 - elementCenter) + "px"

$(element[i]).css("fontSize", size + "px");

$(element[i]).css("opacity",size/100);

$(element[i]).css("zIndex" ,size);

$(element[i]).css("left" ,leftValue);

$(element[i]).css("top", y + "%");

}

offset += stepping;

}

});

/*]]>*/</script>