DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
背面可见性
属性与 3D 变换有关。 使用 3D 变换,您可以旋转元素,以便我们认为的元素“正面”不再面向屏幕。 例如,这将使元素翻转离开屏幕。
.flip {
transform: rotateY(180deg);
}
它看起来就像您用铲子把它拿起来,像煎饼一样翻过来。 这是因为 背面可见性
的默认值为 可见
。 它不应该是可见的,您可以隐藏它。
.flip {
transform: rotateY(180deg);
backface-visibility: hidden;
}
语法
backface-visibility: visible | hidden;
- 初始值:
可见
- 应用于: 可变换元素
- 继承: 否
- 百分比: 不适用
- 计算值: 特定关键字
- 动画类型: 离散
值
可见
(默认) – 元素即使在不面向屏幕时也始终可见。隐藏
– 当元素不面向屏幕时,它不可见。继承
– 该属性从其父元素获取其值。初始
– 将属性设置为其默认值,即可见
。
演示
这在执行 3D 效果时很有用。 例如…
正常工作
<div class="container">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
<p> </p>
</div>
</div>
在 WebKit 中有問題,因為背面可见性没有隐藏
<div class="container no-hide">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
<p> </p>
</div>
</div>
无论出于何种原因,这在 Firefox 中都没有问题,尽管该属性的工作方式相同。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10 | 全部 | 10 1 | 12 2 | 5.1 2 | 15 2 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 3 2 | 5 2 | 62 |
1 在 Firefox 10-15 中支持前缀
-moz-
2 在 Chrome 12-35、Safari、Safari iOS 和 Opera 15-22 中支持前缀
-webkit-
酷
这对菜单设计非常酷。
终于,其他一些浏览器开始实施这个在 Safari 中已经存在一段时间的酷炫功能。
我注意到此属性不适用于绝对定位的元素(至少在 Chrome 中是这样)。
有没有办法改变实际 div 的厚度?来展示 div 不是平面的?比如深度?我认为那会很酷!
但这仍然很酷。
看看这个
有点像。您需要使用额外的元素作为侧面(正面元素 + 4 个侧面元素 + 背面元素)。
嘿,非常好的文章。在我使用这个 css 规则的一些情况下帮助了我。
但我对此感到非常困惑。
在过去的几天里,我一直都在努力在 Sencha Touch(JavaScript)应用程序中进行画布绘制操作(不同的形状)。
在 iPad 中使用画布绘制时,当手指在绘制过程中移动到线条前面时,线条的绘制速度有点慢。
我无法弄清楚是什么让这个应用程序变得有点慢。然后突然,当我将 backface-visiblity: visible 属性添加到 body 的 css 中时,绘制变得更快,就像它应该的那样。
但是,这个 css 在与画布绘制相关的方面有什么重要性,因为在画布上绘制内容时没有动画进行?
谢谢。
你知道为什么这会破坏我的 :active 状态吗?
如果我删除 backface-visibility 属性,一切正常。但是一旦包含它,我就无法再获得任何 :active 伪类状态来工作。
想法?
我认为 backface-visiblity-hidden 在 Android 3.0 上不起作用。在 Xyboard 平板电脑(运行 3.2.2)上查看,它似乎没有任何隐藏。太糟糕了。我希望谷歌能改进他们的 WebKit 版本。
我同意 - 我认为它在 Android 浏览器中不起作用,原因不明。
试试这个示例:http://desandro.github.com/3dtransforms/examples/card-01.html
它在台式机的 Chrome/Safari 上有效,甚至在 iOS 上的 Chrome 浏览器应用程序上也有效,但在 Android 浏览器(Jelly Bean)上无效。
对一个鲜为人知的属性来说,非常实用的用例!
我刚刚使用
-webkit-backface-visibility: hidden
来解决 WebKit 中的文本渲染不一致问题,在页面上有很多动画,文本渲染得比其他页面更细(有时还会闪烁)。这使得所有文本变细,但至少它保持一致。它无法在 IE10 中正确工作。你能否提供任何修复建议?
请查看我在这里的评论 http://davidwalsh.name/css-flip
非常感谢。这可能是我从这个网站获得建议修复我网站问题的第五次了。你是网站救星,兄弟。
你救了我!非常感谢:D
不要使用 -webkit-backface-visibility,它有很多 bug,在很多情况下会导致垂直滚动条的句柄消失。到 Chrome 23 时仍然有 bug。
你说得对。……在 Chrome 30 中仍然没有修复。无论如何,有没有更好的方法来防止 Guy 提到的闪烁问题?我在 Chrome 中使用过渡时经常遇到这个问题,我还没有真正找到背后的规律……
在 Internet Explorer 中不起作用。
为了记录,在 FF 16(OSX 10.5.8)中,我在有问题的示例中看到了“前”文本。这个属性可以解决 Android 浏览器的问题吗?我的客户没有进行任何 3D 旋转,但遇到一个问题,隐藏的图像(应该仅在 :hover 时可见)替换了闲置的图像。
Opera 15(第一个 Blink 版本)支持 3D 变换,所以您可能需要更新“浏览器支持”表。
此外,“由于 backface-visibility 未隐藏,WebKit 中存在问题”也适用于 Blink(Chrome 和新版 Opera)。
大家好!Opera 有什么解决方法吗?也许是一个仅在 Opera 中运行此效果的 js?…
此属性在 iOS7 上不能正常工作,会导致内容在滚动时消失。
这小段 css 使我的标题在 iOS 7 上拉伸,iOS 7 在过去几周里一直是我的噩梦,在 iOS 6 上正常运行的功能在 iOS 7 上不再正常运行,感谢苹果。
即使您的页面演示在 IE-10 中也不起作用。
仅供参考……这还导致我的 iOS 7.0.2 Chrome 和 Safari 崩溃,花了我三个小时才调试出来。如果您使用的移动浏览器崩溃了,可能是这个原因导致的。
嗨,Scott!你能说说你是怎么最终解决这个问题的吗?我觉得我可能因为这个原因导致程序崩溃了。
我也经历了和scott一样的体验……永远不要使用 *{ backface-visibility:hidden; },永远不要针对所有元素,只针对你需要调整的元素。这也是我的网站在设备上崩溃的原因。
嘿…
这个属性在IE中不起作用。
:(
有没有办法在IE中支持它?
我已经尝试了很多方法,包括添加 -ms 前缀和其他东西,但 backface-visibility 不支持…
在Windows XP上翻转时,会出现背面在前面上方的显示问题。
嗨,我按照你的教程复制,但效果无法在我的设备上重现。
如何在html中声明正面和背面?
在Safari上不起作用
感谢您发布这篇精彩的文章。一段时间前,我按照本指南创建了一个带有3D动画的HTML5纸牌游戏。我认为效果还不错。我喜欢我们终于可以做这种事情了。
我在chrome中遇到了问题,backface-visibility 只有在我打开开发者工具时才起作用。我通常在开发时也会打开开发者工具,所以想到我完成了这项功能,结果发现它根本没有起作用,这让人很沮丧.. 有人有关于如何在chrome中让它起作用的可靠建议吗… 我的意思是,如果它在打开开发者工具时可以正确显示,那么它显然有这个功能。
有谁在使用 backface-visibility 时只在视网膜屏幕上看到过死像素线吗?
https://www.dropbox.com/s/eypem6jqhyok2w1/Screenshot%202015-03-11%2011.24.25.png?dl=0
我也有这个问题!它破坏了视网膜上的网站,但是移除这条规则会让非视网膜设备上出现轻微的卡顿。如果有人有天才的解决方案,我很乐意听听!
好文章
我正在尝试实现这个示例,因为它每次悬停元素时都会产生效果,因为我发现其他一些示例有时会在没有过渡的情况下无法产生效果,但是这个示例在IE 10+上无法运行,示例页面也无法运行… 有谁能解决吗?感谢!
你拯救了我的一天!非常感谢。
很棒的解释。我刚从另一个资源中读到另一个解释,它就是没有道理。我认为你为我澄清了问题。谢谢!