I am currently working on a website and encountering an issue.
Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/
The objective is to flip a div when a button is clicked.
The button responsible for flipping the div resides in both the "front" and "back" sections of the card. The functionality works perfectly on desktop, however, the buttons or
<a href>
are not clickable at all. Clicking on them does nothing.
My suspicion is that the issue could be related to the CSS, but I cannot pinpoint the exact cause
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
}
.flip .card .back {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner{margin:0px !important;}
If anyone has any insights into what might be causing this issue, it would be greatly appreciated!
Thank you!