问题描述
我试图在我的网页上包含CSS 3D变换效果,但是一旦卡翻转后,单击链接就会遇到一些问题。
问题
为什么会发生这种情况?
如何解决此问题,以便在翻转卡后单击链接?
示例
代码
<!DOCTYPE html>
< html>
< head>
< title> Flipp< / title>
< meta charset = utf-8>
< style>
.thumb
{
display:block;
width:300px;
高度:340像素;
头寸:相对;
保证金:50px;
float:left;
}
.thumb-wrapper
{
display:block;
宽度:100%;
身高:100%;
颜色:#A29088;
}
.thumb .thumb-front
{
宽度:100%;
身高:100%;
头寸:绝对;
display:block;
背景:#ff0;
}
.thumb .thumb-back
{
宽度:100%;
身高:100%;
头寸:绝对;
display:block;
背景:#f00;
}
/ *翻转效果* /
.thumb.flip
{
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o视角:800px;
角度: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:3,preserve-3d;
-moz-transform-style:保留3d;
-ms-transform-style:保留3d;
-o-transform-style:保留3d;
转换样式:preserve-3d;
}
.thumb.flip .thumb-wrapper.flipper,
.thumb.flip .thumb-front,
.thumb.flip .thumb-back
{
-webkit-backface-visibility:隐藏;
-moz-backface-visibility:隐藏;
-ms-backface-visibility:隐藏;
-o-backface-visibility:隐藏;
背面可见性:隐藏;
}
.thumb.flip .thumb-wrapper.flipper,
.thumb.flip .thumb-back
{
-webkit-transform:旋转Y(-180deg);
-moz-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
-o-transform:rotationY(-180deg);
转换:rotateY(-180deg);
}
a
{
display:block;
宽度:100%;
身高:100%;
}
< / style>
< / head>
< body>
< div class = thumb flip>
< div class = thumb-wrapper>
< div class = thumb-front>
< / div>
< div class = thumb-back>
< a href = />
巴兹
< / 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()
{
//添加/删除可产生过渡效果的翻转类
$('。thumb.flip')。hover(
函数()
{
$(this).find('。thumb-wrapper')。addClass('flipper');
},
函数( )
{
$(this).find('。thumb-wrapper')。removeClass('flipper');
}
);
});
< / script>
< / body>
< / html>
识别
这主要是一部分以下教程:
我认为 backface-visibility
属性不需要在包装上声明,而仅在内部div上声明。如果您从 .thumb.flip .thumb-wrapper.flipper
< backface-visibility
属性中删除,这似乎可行。 / p>
I'm attempting to include a CSS 3D transform effect on my webpage, though I have some issues with clicking the links once the card has flipped over.
Question
Why is this occurring?
How could this be solved so I can click the link once I flipped 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 mostly a part of the following tutorial: http://www.queness.com/post/11493/create-css-3d-transform-card-flip-gallery
I think the backface-visibility
property needs not be declared on the wrapper, just the internal divs. It seems to work if you remove the backface-visibility
properties from .thumb.flip .thumb-wrapper.flipper
这篇关于CSS 3D转换-无法单击链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!