Question

亲爱的朋友们，我感谢你们抽出时间，我有四个元素在盘旋时在y轴上旋转。它们包含在四个div中，这些div本身包含在div包装器中。当我将鼠标悬停在它上面时，我想让后面的图像可以点击，我不确定如何做到这一点。在我看来，将整个div包装在一个可能甚至不起作用的锚标签中的形式并不好。我最初在div中包含了一个可点击的图像，但这在我看来也不是很好的形式，虽然我怀疑目前它可能是唯一的方式，我不知道。你可以在这里看到我的问题，

site with CSS flippers

我包含了相关的html和CSS部分，非常感谢您抽出时间。

<div id="frontflipwrapper"> 
<div class="frontflip3D"> 
<div id="openings_back" class="back_page_flip"><a href="#"></a></div>
<div id="openings" class="front_page_flip"></div>
</div> 
<div class="frontflip3D"> 
<div id="middle_game_back" class="back_page_flip"></div> 
<div id="middle_game"class="front_page_flip"></div> 
</div> 
<div class="frontflip3D"> 
    <div id="end_game_back" class="back_page_flip"></div> 
    <div id="end_game"class="front_page_flip"></div> 
</div>
<div class="frontflip3D"> 
<div id="strategy_back" class="back_page_flip"></div> 
<div id="strategy"class="front_page_flip"></div> 
</div>
</div> 

/* front page flipper*/

#frontflipwrapper{
margin:10px auto;
width:100%;
height:140px;
}

.frontflip3D{ 
    width:100px; 
    height:100px; 
margin:4.2%;
float:left; 
} 
.frontflip3D > .front_page_flip{ 
position:absolute; 
transform: perspective( 600px ) rotateY( 0deg ); 
background:#ccc;
border-radius:4px;  
width:10%; 
height:100px; 
backface-visibility: hidden; 
transition: transform .5s linear 0s; 
} 
.frontflip3D > .back_page_flip{ 
position:absolute; 
transform: perspective( 600px ) rotateY( 180deg ); 
background:#80bfff;
border-radius:4px;  
width:10%; 
height:100px; 
backface-visibility: hidden; 
transition: transform .5s linear 0s; 
} 
.frontflip3D:hover > .front_page_flip{ 
transform: perspective( 600px ) rotateY( -180deg ); 
} 

.frontflip3D:hover > .back_page_flip{ 
transform: perspective( 600px ) rotateY( 0deg ); 
} 

#openings{
background-image:url(pawn.png)
}

#middle_game{
background-image:url(knight.png)
}
#end_game{
background-image:url(king.png)
}
#strategy{
background-image:url(rook.png)
}

#openings_back{
background-image:url(img/opening_back.png)

}

#middle_game_back{
background-image:url(img/middle_game_back.png)
}

#end_game_back{
background-image:url(img/endgame_back.png)
}

#strategy_back{
background-image:url(img/strategy_back.png)
}

/* end of front page flipper*/

Answer 1

如果这是问题的一部分，请点击，但有一个<div>在开头div>

中没有一个小于号的符号

如何使图像的可翻转侧可点击

1 个答案: