CSS Webkit 背面可见性不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7455502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webkit backface visibility not working
提问by dgiulian
I'm building a simple example to flip a card using the -webkit-transform: rotateYproperty.
我正在构建一个简单的示例来使用该-webkit-transform: rotateY属性翻转卡片。
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: hiddenproperty. But it seems that is not working anymore in chrome (Both in the stable and the nightly build version)
几天前它工作正常，但突然间它停止工作。效果仍然有效，但是当我将鼠标悬停在卡片上时，正面应该消失以使背面可见。为此，我正在使用该-webkit-backface-visibility: hidden物业。但它似乎不再适用于 chrome（在稳定版和夜间构建版中）
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 exampleuses 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?
我得出这个结论是因为我做了几个简单的例子，只使用了一个旋转的 div，上面有一个简单的文本，背面隐藏属性，它仍然可见。此外，此示例使用此属性并且也停止工作。所以，总而言之，我的问题是，是否还有其他人对此属性有问题，或者我的代码有问题吗？
采纳答案by EricG
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:
当孩子有一个webkit-transform. 我注意到我还必须在该元素上设置背面可见性：
<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 */
}
回答by Sujay Shinoda
Just put this -webkit-transform:rotateY(0deg);, you need to tell the browser which is the front face first.
就这样-webkit-transform:rotateY(0deg);，你需要先告诉浏览器哪个是正面。
回答by Gabor
Interestingly enough, if you set opacity to anything other than 1 (say, .99), suddenly the backface-visibility will come into effect.
有趣的是，如果您将不透明度设置为 1 以外的任何值（例如，0.99），背面可见性会突然生效。
回答by Konrad Dzwinel
If you have tested all other options here and nothing worked while this exampleworks on your browser, then please make sure that element corresponding to #cardfrom the example bellow has overflow:visible:
如果您在此处测试了所有其他选项，但在此示例在您的浏览器上运行时没有任何效果，那么请确保与#card下面示例中对应的元素具有overflow:visible：
<div id="container">
<div class="card">
<div class="front face"></div>
<div class="back face"></div>
</div>
</div>
回答by gooberverse
I've encountered this problem in multiple versions of Chrome on Windows XP, including Chrome 24.
我在 Windows XP 上的多个 Chrome 版本中都遇到过这个问题，包括 Chrome 24。
This fixed it:
这修复了它：
Open chrome flag editor via this URL:
chrome://flags/Enable the following setting:
Override software rendering listOverrides the built-in software rendering list and enables GPU-acceleration on unsupported system configurations.
- Also make sure that accelerated CSS animations are enabled.
通过此 URL 打开 chrome 标志编辑器：
chrome://flags/启用以下设置：
覆盖软件渲染列表覆盖内置软件渲染列表并在不受支持的系统配置上启用 GPU 加速。
- 还要确保启用了加速 CSS 动画。
The fact this resolved the problem suggests Chrome considers my system an "unsupported system". As such your mileage may vary depending on Chrome's impression of your system.
这解决了问题的事实表明 Chrome 认为我的系统是“不受支持的系统”。因此，您的里程可能会因 Chrome 对您系统的印象而异。
回答by Luke Madhanga
I read somewhere that it is something to do with the host pc's GPU power. This works for me on every device that has a decent GPU. Proof for this is the fact that it doesn't work for me on a Dell Mini, even after a Fresh OS install (win8) and on an old XP machine. The problem is, back-face-visibility is there, but isn't called, meaning that I cannot use javascript to detect this.
我在某处读到这与主机 PC 的 GPU 能力有关。这对我来说适用于每台具有不错 GPU 的设备。证明这一点的事实是，即使在安装了全新操作系统 (win8) 和旧 XP 机器之后，它在 Dell Mini 上也不适合我。问题是，背面可见性在那里，但没有被调用，这意味着我无法使用 javascript 来检测这一点。
Check for http://amproductions.org
回答by Ben Sinclair
It seems that it's not quite stable on Mac, I left chrome for a couple of hours with page with animation working and when I came back back-visibility just stop working. Chrome restart helped to solve the problem.
似乎它在 Mac 上不太稳定，我离开 chrome 几个小时，页面动画工作，当我回来时，可见性停止工作。Chrome 重启有助于解决问题。
