[英]How do I make the link in the back div clickable
當div“翻轉”時,我希望能夠點擊鏈接,我該怎么做到這一點?
顯然我需要寫一些更多的文字,否則我不會發布這個問題,以后誰會去喝啤酒?
CSS:
.flip-container {
perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 200px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
background-color: red;
}
.back {
transform: rotateY(180deg);
background-color: green;
}
HTML:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
Front
</div>
<div class="back">
<!-- back content -->
<a href="http://www.google.com">Click me</a>
</div>
</div>
</div>
在代碼中添加以下內容。 translateZ
使其可以點擊
.back {
transform: rotateY(180deg) translateZ(1px);
background-color: green;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.