3d Rotating Hexagon

[Ppoentje]

Hey guys, 

 

I'm trying to get a 3d hexagon to rotate with a picture on each side, and the pictures should be clickable to go to a different screen.

 

I got thos right now:

 

http://i.imgur.com/gVDfYbk.gifv

 

It looks like its good but there are still openenings in between some of the sides. This is because i hard coded the positions of the sides which is probably a bad idea to begin with but im not sure how else to do it.

 

The HTML part for 1 side

<div id="page">  <div class="shadow-wrapper">    <div class="shadow">      <div> </div>    </div>  </div>  <div class="box-wrapper">    <div class="box">      <div class="side1">        <p>        <a href="Dew.html">          <img src="Dew.png"/>                 </p>      </div>

CSS part:

body{  background-color: #333;}#page {  position: absolute;  text-align: center;  left: 40%;  top: 100px;  color: #222;}.box-wrapper {  perspective: 1600px;  perspective-origin: 50% 0px;}.box {  position: relative;  width: 400px;  transform-style: preserve-3d;	transform: rotateY(-120)}.box p {  padding: 40px 0;}.box div {  outline: 1px solid #999;  position: absolute;  width: 400px;  height: 500px;  opacity: 0.98;  box-shadow: inset 0px 0px 100px #555;}.side1 {  transform: translateZ(200px);  background-color: #eee;}

Is there a better way of doing this?