CSS 3D转换-无法单击链接 [英] CSS 3D transform - Unable to click link
本文介绍了CSS 3D转换-无法单击链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在我的网页上包含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>
识别
这主要是一部分以下教程： http：// www。 queness.com/post/11493/create-css-3d-transform-card-flip-gallery
解决方案
我认为 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转换-无法单击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
