标签定义及使用说明
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，如若转载，请注明出处：https://www.web176.com/css3transform/5105.html
支付宝 
微信 