CSS3 backface-visibility 属性 | CSS3教程：CSS3 3D转换

标签定义及使用说明

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

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

Chrome/Safari 用户：为了更好地理解这个属性，查看演示：

<!DOCTYPE html>
<html>
<head>
  <title>Web176教程网(web176.com)</title> 
<style> 
#div1
{
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
transform:rotateY(25deg);
-webkit-transform:rotateY(25deg); /* Safari and Chrome */-moz-transform:rotateY(25deg); /* Firefox */}
</style>

<script>
function rotate(value)
{
document.getElementById('div1').style.webkitTransform="rotateY(" + value + "deg)";
document.getElementById('div1').style.MozTransform="rotateY(" + value + "deg)";
document.getElementById('div1').style.transform="rotateY(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
function checkBackface()
{
if (document.getElementById("bf").checked==true)
 {
 document.getElementById('div1').style.webkitBackfaceVisibility="hidden";
 document.getElementById('div1').style.MozBackfaceVisibility="hidden"; 
 }
else
 {
 document.getElementById('div1').style.webkitBackfaceVisibility="visible";
 document.getElementById('div1').style.MozBackfaceVisibility="visible";  
 }
}
</script>

</head>
<body>

<div id="div1">HELLO</div>

<p>Rotate the yellow div element, with and without checking the backface-visibility checkbox:</p>
<p>Hide the backside:<input type="checkbox" onchange="checkBackface()" id="bf" /></p>
Rotate:<br>
<input type="range" min="-360" max="360" value="25" onchange="rotate(this.value)" /><br>
transform: rotateY(<span id="span1">7deg</span>);<br>

</body>
</html>

Default value:	visible
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.backfaceVisibility=”hidden”

语法

backface-visibility: visible|hidden;

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

浏览器支持

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

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

属性	谷歌	IE	火狐	苹果	opera
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

实例

隐藏旋转 div 元素的背面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style>
div
{
 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>
</head>
<body>
<p>这个例子显示了两个div元素,旋转了180度, 转向远离用户的方向</p>
<p>第一个div元素backface-visibility属性设置为 "hidden", 因此应该是看不见的。.</p>

<div id="div1">DIV 1</div>

<div id="div2">DIV 2</div>

<p><b>注意:</b> 该属性只兼容 IE 10, Firefox, Chrome和 Safari.</p>

</body>
</html>

terry

这个人很懒，什么都没有留下～