Witam,
próbuję stworzyć przy pomocy JavaScript dynamiczne menu z animacją podobną do tej ze strony Otherspace wykonaną technologią flash.

Dotychczas, modyfikując i opierając się na skrypcie ze strony 3D Carousel Using TweenMax.js and jQuery udało się mi stworzyć podobną animację.

W czym problem? Problemem są dla mnie linki do poszczególnych "kółek". Pomimo osobnego podlinkowania w html-u linki się albo nakładają (na jednym kółku - dwa) albo gubią. Proszę o wskazówkę jak rozwiązać tę kwestię, ew. czy byłaby możliwość zastosowania innego skryptu, który by pozwolił na podobną animację co we flashu.

Kod:
index.html

<div id="contentContainer" class="trans3d"> 
	<section id="carouselContainer" class="trans3d">
		<a class="carouselItem trans3d" href="strona1.html"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
        <a class="carouselItem trans3d" href="strona2.html"><img id="item2" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
        <a class="carouselItem trans3d" href="strona3.html"><img id="item3" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
        <a class="carouselItem trans3d" href="strona3.html"><img id="item4" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
         <a class="carouselItem trans3d" href="strona3.html"><img id="item5" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
         <a class="carouselItem trans3d" href="strona3.html"><img id="item6" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
         <a class="carouselItem trans3d" href="strona3.html"><img id="item7" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
Kod:
css
	.trans3d
	{
		-webkit-transform-style: preserve-3d;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform-style: preserve-3d;
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform-style:preserve-3d;
		-ms-transform: translate3d(0, 0, 0);
		transform-style:preserve-3d;
		transform: translate3d(0, 0, 0);
		
		position: relative;
		display:block;
		margin: 0 auto;
		width: 100%;
		height: 100%;

		/*-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility:hidden;
		backface-visibility:hidden;*/
	}
	
	#contentContainer
	{
		/*position:absolute;*/
		position: relative;
		display:block !important;
		margin: 0 auto;
		margin-top: -100px;
		/*margin-left:-500px;
		margin-top:-500px;
		left:50%;
		top:50%;
		width:1000px;
		height:1000px;*/
		width: 100%;
		height: 100%;
	}
	
	#carouselContainer
	{
		position: relative;
		display:block !important;
		margin: 0 auto;
		margin-top: -100px;
		width: 100%;
		height: 100%;
		/*
		position:absolute;
		margin-left:-500px;
		margin-top:-500px;
		left:50%;
		top:50%;
		width:1000px;
		height:1000px;*/
	}
	
	.carouselItem
	{
		width:320px;
		height:320px;
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-160px;
		margin-top:-90px;
		visibility:hidden;
	}
	
	.carouselItemInner
	{
		width:320px;
		height:320px;
		position:absolute;
		/*background-color:rgba(255, 255, 255, .75);
		border:10px solid rgba(255, 255, 255, .5);
		color:aqua;*/
		font-size:72px;
		left:50%;
		top:50%;
		margin-left:-160px;
		margin-top:-90px;
		text-align:center;
		padding-top:50px;
		
	}