您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關css中的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>
感謝各位的閱讀!關于“css中的backface-visibility屬性怎么用”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。