CSS3 backface-visibility 属性

隐藏旋转 div 元素的背面：

div
{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden; /* Chrome 、Safari */
    -moz-backface-visibility:hidden; /* Firefox */
    -ms-backface-visibility:hidden; /* Internet Explorer */
}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

backface-visibility 属性定义当元素背面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。

	值
默认值:	visible
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.backfaceVisibility="hidden"

语法

backface-visibility: visible|hidden;

属性值

值	描述
visible	背面是可见的。
hidden	背面是不可见的。

实例

<style>
div.demo-backface-visibility
{
	position:relative;
	height:60px;
	width:60px;
	background-color:red;
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg); /* Chrome and Safari */
	-moz-transform:rotateY(180deg); /* Firefox */
}
#div1
{
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
}
#div2
{
	-webkit-backface-visibility:visible;
	-moz-backface-visibility:visible;
	-ms-backface-visibility:visible;
}
</style>

<p>这个例子显示了两个div元素,旋转了180度, 转向远离用户的方向</p>
<p>第一个div元素backface-visibility属性设置为 "hidden", 因此应该是看不见的。.</p>

<div class="demo-backface-visibility" id="div1">DIV 1</div>

<div class="demo-backface-visibility" id="div2">DIV 2</div>

效果

这个例子显示了两个div元素,旋转了180度, 转向远离用户的方向

第一个div元素backface-visibility属性设置为 "hidden", 因此应该是看不见的。.

DIV 1

DIV 2