CSS - backface-visibility 属性_CSS 菜鸟教程

CSS 的 backface-visibility 属性决定了元素在面向用户时背面的可见性。元素的背面只不过是元素正面的镜像。

当元素在三维空间中变换和旋转时，可以使背面可见。

语法


backface-visibility: visible | hidden | initial | inherit;

属性值

值	描述
visible	背面部分是可见的。默认值。
hidden	背面部分不可见。
initial	将属性设置为其初始值。
inherit	将继承父元素的属性。

CSS Backface Visibility 属性的示例

下面介绍了具有不同值的 backface-visibility 属性的一些示例。

可见背面

为了使元素的后半部分可见，使用可见值。在以下示例中，立方体的背面是可见的。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .show div {
	 	 	 	 	 	 backface-visibility: visible;
	 	 	 	 }

	 	 	 	 .container {
	 	 	 	 	 	 width: 150px;
	 	 	 	 	 	 height: 150px;
	 	 	 	 	 	 margin: 75px 0 0 75px;
	 	 	 	 	 	 border: none;
	 	 	 	 }

	 	 	 	 .cube {
	 	 	 	 	 	 width: 100%;
	 	 	 	 	 	 height: 100%;
	 	 	 	 	 	 perspective: 350px;
	 	 	 	 	 	 perspective-origin: 120% 120%;
	 	 	 	 	 	 transform-style: preserve-3d;
	 	 	 	 }

	 	 	 	 .face {
	 	 	 	 	 	 position: absolute;
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 line-height: 80px;
	 	 	 	 	 	 font-size: 3.5em;
	 	 	 	 	 	 color: white;
	 	 	 	 	 	 text-align: center;
	 	 	 	 }

	 	 	 	 .front {
	 	 	 	 	 	 background: rgba(178, 0, 178, 0.5);
	 	 	 	 	 	 transform: translateZ(50px);
	 	 	 	 }

	 	 	 	 .back {
	 	 	 	 	 	 background: rgba(178, 178, 0, 0.5);
	 	 	 	 	 	 color: black;
	 	 	 	 	 	 transform: rotateY(180deg) translateZ(50px);
	 	 	 	 }

	 	 	 	 .right {
	 	 	 	 	 	 background: rgba(0, 0, 178, 0.5);
	 	 	 	 	 	 transform: rotateY(90deg) translateZ(50px);
	 	 	 	 }

	 	 	 	 .left {
	 	 	 	 	 	 background: rgba(178, 0, 0, 0.5);
	 	 	 	 	 	 transform: rotateY(-90deg) translateZ(50px);
	 	 	 	 }

	 	 	 	 .top {
	 	 	 	 	 	 background: rgba(0, 178, 0, 1);
	 	 	 	 	 	 transform: rotateX(90deg) translateZ(50px);
	 	 	 	 }

	 	 	 	 .bottom {
	 	 	 	 	 	 background: rgba(0, 0, 0, 0.2);
	 	 	 	 	 	 transform: rotateX(-90deg) translateZ(50px);
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS backface-visibility property</h2>
	 	 <p>
	 	 	 	 The back faces (2, 4, 5) are visible through the front faces (1, 3, 6).
	 	 </p>
	 	 <div class="container">
	 	 	 	 <div class="cube show">
	 	 	 	 	 	 <div class="face front">1</div>
	 	 	 	 	 	 <div class="face back">2</div>
	 	 	 	 	 	 <div class="face right">3</div>
	 	 	 	 	 	 <div class="face left">4</div>
	 	 	 	 	 	 <div class="face top">5</div>
	 	 	 	 	 	 <div class="face bottom">6</div>
	 	 	 	 </div>
	 	 </div>
</body>

</html>

隐形背影

为了使元素的后半部分不可见，使用 hidden 值。在以下示例中，立方体的背面不可见。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .hide div {
	 	 	 	 	 	 backface-visibility: hidden;
	 	 	 	 }

	 	 	 	 .container {
	 	 	 	 	 	 width: 150px;
	 	 	 	 	 	 height: 150px;
	 	 	 	 	 	 margin: 75px 0 0 75px;
	 	 	 	 	 	 border: none;
	 	 	 	 }

	 	 	 	 .cube {
	 	 	 	 	 	 width: 100%;
	 	 	 	 	 	 height: 100%;
	 	 	 	 	 	 perspective: 350px;
	 	 	 	 	 	 perspective-origin: 120% 120%;
	 	 	 	 	 	 transform-style: preserve-3d;
	 	 	 	 }

	 	 	 	 .face {
	 	 	 	 	 	 position: absolute;
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 line-height: 80px;
	 	 	 	 	 	 font-size: 3.5em;
	 	 	 	 	 	 color: white;
	 	 	 	 	 	 text-align: center;
	 	 	 	 }

	 	 	 	 .front {
	 	 	 	 	 	 background: rgba(178, 0, 178, 0.5);
	 	 	 	 	 	 transform: translateZ(50px);
	 	 	 	 }

	 	 	 	 .back {
	 	 	 	 	 	 background: rgba(178, 178, 0, 0.5);
	 	 	 	 	 	 color: black;
	 	 	 	 	 	 transform: rotateY(180deg) translateZ(50px);
	 	 	 	 }

	 	 	 	 .right {
	 	 	 	 	 	 background: rgba(0, 0, 178, 0.5);
	 	 	 	 	 	 transform: rotateY(90deg) translateZ(50px);
	 	 	 	 }

	 	 	 	 .left {
	 	 	 	 	 	 background: rgba(178, 0, 0, 0.5);
	 	 	 	 	 	 transform: rotateY(-90deg) translateZ(50px);
	 	 	 	 }

	 	 	 	 .top {
	 	 	 	 	 	 background: rgba(0, 178, 0, 1);
	 	 	 	 	 	 transform: rotateX(90deg) translateZ(50px);
	 	 	 	 }

	 	 	 	 .bottom {
	 	 	 	 	 	 background: rgba(0, 0, 0, 0.2);
	 	 	 	 	 	 transform: rotateX(-90deg) translateZ(50px);
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS backface-visibility property</h2>
	 	 <p>Back faces (2, 4, 5) are hidden.</p>
	 	 <div class="container">
	 	 	 	 <div class="cube hide">
	 	 	 	 	 	 <div class="face front">1</div>
	 	 	 	 	 	 <div class="face back">2</div>
	 	 	 	 	 	 <div class="face right">3</div>
	 	 	 	 	 	 <div class="face left">4</div>
	 	 	 	 	 	 <div class="face top">5</div>
	 	 	 	 	 	 <div class="face bottom">6</div>
	 	 	 	 </div>
	 	 </div>
</body>

</html>

支持的浏览器

属性
backface-visibility	36.0	10.0	16.0	4.0	23.0

<< CSS - backdrop-filter 属性 CSS - background 属性 >>