只有部分href链接处于活动状态

Question

我在拇指背面构建一个带有旋转拇指的HTML，CSS缩略图网格是一个href链接。出于某种原因，只有部分链接可以点击。

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
    <div class="front">
        front
    </div>
    <div class="back">
        back
         <p><a href="index.html">Find out more</a></p>
    </div>
</div>

请参阅我的jsfiddle http://jsfiddle.net/brm3z2dk/3/

Answer 1

将此添加到您的css文件或附加.back

.back {
 transform: rotateY(180deg) translateZ(1px);
 width: 200px;
 height: 150px;
 padding: 10px;
 background-color: rgb(29, 140, 194);
 font-size: 22px;
 color: rgb(255, 255, 255);
 font-weight: 300;
 line-height: 1.1;
 }

我只添加translateZ(1px)进行转换。

工作JS小提琴

http://jsfiddle.net/2a8y5x3t/

我希望这会有所帮助：）

Answer 2

如果您希望将整个div视为可点击，请使用onclick="location.href='index.html';"，并在http://jsfiddle.net/brm3z2dk/7/

提供更新后的代码

Answer 3

您需要在课程transform: rotateY(-180deg);上添加.back，请参阅 DEMO 。

.back {
transform: rotateY(-180deg);/*change from 180 to -180deg*/
width: 200px;
height: 150px;
padding:10px;
background-color:#1d8cc2;
font-size: 22px;
color: #fff;
font-weight: 300;
line-height: 1.1;
}