CSS3 transition not behaving as expected in webkit - css

Question

First time poster, fairly new to web design. My design has an image that when hovered, displays images on the left, top and right through css3 transforms.
These images pop out great when hovered and I would like to hover over the new images so I might click on them as links.
This seems to work great in IE10 and Firefox but fails somewhat in WebKit browsers. The issue I am seeing is that when hovering over the newly translated divs, the transition will flicker somewhat and then at random points in the div return to its original state.
As I said this works fine in Firefox and IE10, I am able to hover over the new divs and click on them with no issue. With WebKit, sometimes I will be able to click on the div and sometimes I will only be able to scroll halfway into the div before it retracts.
Relevant code is posted below:
<div id="logo">
<img id="mainLogo" src="Images/logo.png" style="width:320px;" />
<div id="div1">
<img src="Images/box1.png" style="width:320px" />
</div>
<div id="div2">
<img src="Images/box3.png" style="width:320px" />
</div>
<div id="div3">
<img src="Images/box2.png" style="width:320px" />
</div>
</div>
#logo
{
width:320px;
position:relative;
margin:0 auto;
margin-top:300px;
}
#div1
{
top:100px;
left:-200px;
background-repeat:no-repeat;
width:320px;
height:200px;
position:absolute;
transform:rotatey(270deg);
-webkit-transform:rotatey(270deg);
-moz-transform:rotatey(90deg);
transition:transform 0.5s;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition:-moz-transform 0.5s;
}
#div2
{
top:100px;
left:200px;
background-repeat:no-repeat;
width:320px;
height:200px;
position:absolute;
transform:rotatey(270deg);
-webkit-transform:rotatey(270deg);
-moz-transform:rotatey(90deg);
transition:transform 0.5s;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition:-moz-transform 0.5s;
}
#div3
{
top:-100px;
left:0px;
background-repeat:no-repeat;
width:320px;
height:200px;
position:absolute;
transform:rotatex(90deg);
-webkit-transform:rotatex(90deg);
-moz-transform:rotatex(90deg);
transition:transform 0.5s;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition:-moz-transform 0.5s;
}
#logo:hover #div1
{
transform:translate(-120px,0) rotatey(180deg);
-webkit-transform: translate(-120px,0) rotatey(180deg);
-moz-transform:translate(-120px,0) rotatey(180deg);
}
#logo:hover #div2
{
transform:translate(110px,0) rotatey(180deg);
-webkit-transform: translate(110px,0) rotatey(180deg);
-moz-transform:translate(110px,0) rotatey(180deg);
}
#logo:hover #div3
{
transform:translate(0,-60px) rotatex(180deg);
-webkit-transform: translate(0,-60px) rotatex(180deg);
-moz-transform:translate(0,-60px) rotatex(180deg);
}
JSFiddle