I am looking to create a CSS flip card that rotates in 3D on mouse hover, similar to the one showcased on W3Schools. My main requirement is to have a clickable link on the back side of the card.
While there are no issues with the latest versions of Chrome or Firefox, I have encountered an issue in Safari (Version 17.0), where only the right-hand side of the link is clickable.
https://i.sstatic.net/Jo8e0.pnghttps://i.sstatic.net/L3y5u.png
Here's a code example: https://jsfiddle.net/poooow/oe3b0swq/
.flip-card {
background-color: transparent;
width: 150px;
height: 150px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #408abf;
color: white;
}
.flip-card-back {
background-color: #66bf40;
color: white;
transform: rotateY(180deg);
}<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h1>Front</h1>
</div>
<div class="flip-card-back">
<h1>Back</h1>
<a href="#">This link doesn't work in Safari</a>
</div>
</div>
</div>