我正在尝试在我的网页上添加CSS 3D变换效果,但是当卡片翻转后,我点击链接时遇到了一些问题。
问题
为什么会出现这种情况?
如何解决这个问题,以便我可以在翻转卡片后点击链接?
示例
代码
<!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>
识别
这主要是以下教程的一部分:http://www.queness.com/post/11493/create-css-3d-transform-card-flip-gallery
.thumb.flip .thumb-wrapper.flipper
移到下一行,或提供你更改的CSS块,以使答案更易于理解。 - Zach Saucier