I'm currently working on implementing a CSS 3D transform effect on my website. However, I am encountering some issues with clicking the links once the card has been flipped over.
Question
Why is this happening?
How can I resolve this so that I can click the link after flipping the card?
Example
Code
<!DOCTYPE html>
<html>
<head>
<title>Flipp</title>
<meta charset="utf-8">
<style>
.thumb
{
display:block;
width:300px;
height:340px;
position:relative;
margin:50px;
float:left;
}
.thumb-wrapper
{
display:block;
width:100%;
height:100%;
color: #A29088;
}
.thumb .thumb-front
{
width:100%;
height:100%;
position:absolute;
display:block;
background:#ff0;
}
.thumb .thumb-back
{
width:100%;
height:100%;
position:absolute;
display:block;
background:#f00;
}
/* Flipp effect */
.thumb.flip
{
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.thumb.flip .thumb-wrapper
{
-webkit-transition: -webkit-transform .35s;
-moz-transition: -moz-transform .35s;
-ms-transition: -moz-transform .35s;
-o-transition: -moz-transform .35s;
transition: -moz-transform .35s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.thumb.flip .thumb-wrapper.flipper,
.thumb.flip .thumb-front,
.thumb.flip .thumb-back
{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.thumb.flip .thumb-wrapper.flipper,
.thumb.flip .thumb-back
{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
a
{
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="thumb flip">
<div class="thumb-wrapper">
<div class="thumb-front">
</div>
<div class="thumb-back">
<a href="/">
Baz
</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function ()
{
// add/remove flip class that make the transition effect
$('.thumb.flip').hover(
function ()
{
$(this).find('.thumb-wrapper').addClass('flipper');
},
function ()
{
$(this).find('.thumb-wrapper').removeClass('flipper');
}
);
});
</script>
</body>
</html>
Recognition
This is mainly based on the tutorial found here: