第一次发布海报，网页设计相当新鲜。我的设计有一个图像，当悬停时，通过css3变换在左侧，顶部和右侧显示图像。
这些图像在悬停时突然出现，我想将鼠标悬停在新图像上，以便点击它们作为链接。
这似乎在IE10和Firefox中运行良好，但在WebKit浏览器中有些失败。我看到的问题是，当悬停在新翻译的div上时，转换会稍微闪烁，然后div中的随机点返回其原始状态。
正如我所说，这在Firefox和IE10中运行良好，我可以将鼠标悬停在新的div上并点击它们没有问题。使用WebKit，有时我可以点击div，有时我只能在它缩回之前滚动到div的一半。
相关代码发布如下：
<div id="logo">
<img id="mainLogo" src="Images/logo.png" style="width:320px;" />
<div id="div1">
<a href=""><img src="Images/box1.png" style="width:320px" /></a>
</div>
<div id="div2">
<a href=""><img src="Images/box3.png" style="width:320px" /></a>
</div>
<div id="div3">
<a href=""><img src="Images/box2.png" style="width:320px" /></a>
</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);
}