1

第一次海报，对网页设计来说相当新。我的设计有一个图像，当悬停时，通过 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);
}

JSFiddle

4

0 回答 0