backface-visibility 属性

Html5知典

发布于 2019-11-26 17:07:21

5430

发布于 2019-11-26 17:07:21

文章被收录于专栏：Html5知典Html5知典

用途

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

语法

backface-visibility: visible|hidden;

值

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

例子

/* HTML */
<div class="stage1">stage1</div> 
<div class="stage2">stage2</div>   
 
/* CSS */
.stage1,.stage2{ 
    position:relative; 
    display: inline-block; 
    height:60px; 
    width:60px; 
    color:#fff; 
    background-color:red; 
    transform:rotateY(180deg); 
    -webkit-transform:rotateY(180deg); /* Chrome and Safari */ 
    -moz-transform:rotateY(180deg); /* Firefox */ 
    } 
.stage1{ 
    -webkit-backface-visibility:hidden; 
    -moz-backface-visibility:hidden; 
    -ms-backface-visibility:hidden; 
    } 
.stage2{ 
    -webkit-backface-visibility:visible; 
    -moz-backface-visibility:visible; 
    -ms-backface-visibility:visible; 
    }

执行结果