背面可见性

Avatar of Sara Cope
Sara Cope

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 中都没有问题,尽管该属性的工作方式相同。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
10全部10 112 25.1 215 2
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部全部3 25 262
来源:caniuse

1 在 Firefox 10-15 中支持前缀 -moz-
2 在 Chrome 12-35、Safari、Safari iOS 和 Opera 15-22 中支持前缀 -webkit-