初めてのポスターで、ウェブデザインにはかなり慣れていません。私のデザインには、ホバーすると 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);
}