backface-visibility属性怎么用

　　CSS3backface-visibility属性

　　作用：backface-visibility属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。

　　语法：

　　backface-visibility:visible|hidden;

　　visible：背面是可见的。

　　hidden：背面是不可见的。

　　注：只有InternetExplorer10+和Firefox支持backface-visibility属性；Opera15+、Safari和Chrome支持需使用-webkit-backface-visibility属性替代。

　　CSS3backface-visibility属性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　div

　　{

　　position:relative;

　　height:60px;

　　width:60px;

　　border:1pxsolid#000;

　　background-color:yellow;

　　transform:rotateY(180deg);

　　-webkit-transform:rotateY(180deg);/*ChromeandSafari*/

　　-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>

　　<divid="div1">DIV1</div>

　　<p>第二个div元素的backface-visibility属性设置为"visible"，所以是可见的。</p>

　　<divid="div2">DIV2</div>

　　<p><b>注释：</b>本例只在InternetExplorer10、Firefox、Chrome以及Safari中有效。</p>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56257.shtml