backface-visibility 属性

2019-11-26 17:07:21 浏览数 (1)

用途

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

语法

代码语言:javascript复制
backface-visibility: visible|hidden;

描述

visible

背面是可见的。

hidden

背面是不可见的。

例子

代码语言:javascript复制
/* 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; 
    }

执行结果

0 人点赞