Webkit背面可见性不工作 [英] Webkit backface visibility not working
问题描述
我正在建立一个简单的例子，使用 -webkit-transform：rotateY 属性翻转卡。
I'm building a simple example to flip a card using the -webkit-transform: rotateY property.
几天前它工作正常，但突然它停止工作。效果仍然有效，但是当我将鼠标悬停在卡片上时，前侧应该消失，使后侧可见。为此，我使用 -webkit-backface-visibility：hidden 属性。但它似乎是不工作的chrome（在稳定和每夜构建版本）
It was working fine a couple of days ago, but all of a sudden it stop working. The effect still works, but when I hover over the card, the front side should disappear to make the back side visible. for this I'm using the -webkit-backface-visibility: hidden property. But it seems that is not working anymore in chrome (Both in the stable and the nightly build version)
这里的代码，如果我做一些可怕的坏的
Here is the code in case I'm doing something terrible bad
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Card Flip Using CSS</title>
<style type="text/css">
body {
background-color: #3d994a;
}
h1 {
font-size: 30pt;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
display: block;
text-shadow: 1px -1px 0px #4E4E4E;
}
#container {
-webkit-perspective: 1000;
}
.card {
position: relative;
width: 286px;
height: 392px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.5s linear;
}
#container:hover .card{
-webkit-transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
border-radius: 20px;
border:1px solid #eee;
background-color: #FFF;
box-shadow: #000 3px 2px 4px;
}
.back {
-webkit-transform:rotateY(180deg);
}
</style>
</head>
<body>
<h1>Hover over the card to flip it</h1>
<div id="container">
<div class="card">
<div class="front face">
<img src="images/back.png" alt="" />
</div>
<div class="back face">
<img src="images/front.png" alt="" />
</div>
</div>
</div>
</body>
</html>
我得出这个结论是因为我做了几个简单的例子，文本，它的背面隐藏属性，它仍然可见。
此外，此示例使用此属性并停止工作。
所以，总结一下，我的问题是，有没有其他人有这个属性的问题，或者我的代码有问题？
I came to this conclusion because I made a couple of simple examples using only a rotated div with a simple text on it, the backface hidden property and it was still visible. Also, this example uses this property and also stopped working. So, to sum up, my question is, does anyone else have problem with this property or is there a problem with my code?
推荐答案
当一个孩子有 webkit-transform 时，我对这样的元素的孩子有类似的问题。
我注意到，我必须设置该元素的背面可见性：
I had a similar problem with children of such an element when a child had a webkit-transform.
I noted that I had to set the backface visibility on that element as well:
<style>
#div1 {
-webkit-transform: rotateX(180deg);
-webkit-backface-visibility: hidden;
}
#div2 {
-webkit-transform: translate3d(0,0,0);
}
</style>
<div id="div1">
<div id="div2">
Text
</div>
</div>
所以解决方案也是使用：
So the solution is to use as well:
#div2 {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden; /* again */
}
这篇关于Webkit背面可见性不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
