您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 backface-visibility

2019-8-1 22:10| 作者: admin| 查看: 2828| 评论: 0|来自: 蚂蚁部落

backface-visibility属性用来规定元素的正面不面向屏幕时,背面是否可见。

关于transform变换更多内容可以参阅CSS3 2D/3D转换一章节。

语法结构:

[CSS] 纯文本查看 复制代码
backface-visibility: visible|hidden;

参数解析:

(1).visible:默认值,规定背面可见。

(2).hidden:规定背面不可见。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style type="text/css">  
#box{  
  position:relative;  
  height:200px;  
  width:200px;  
  margin-top:150px;  
  margin-left:150px;  
  border:1px solid black;  
}  
#inner{  
  padding:50px;  
  position:absolute;  
  border:1px solid black;  
  background-color:yellow;  
  transform-origin:40px 40px;  
  font-size:12px;  
      
  transform:rotateY(45deg); 
  backface-visibility:hidden;
}  
table{  
  font-size:12px;  
  width:300px;  
  margin-left:120px;  
}  
.left{text-align:right}  
</style>  
<script type="text/javascript">  
function changeRot(value){  
  var oinner=document.getElementById('inner');  
  var opersp=document.getElementById('persp');  
  oinner.style.transform="rotateY(" + value + "deg)";
  opersp.innerHTML=value + "deg";  
} 
window.onload=function(){ 
  var range=document.getElementById("range"); 
  range.onmousemove=function(){ 
    changeRot(this.value); 
  } 
} 
</script>  
</head>  
      
<body>  
<div id="box">  
  <div id="inner">蚂蚁部落</div>  
</div>  
<table>  
  <tr>  
    <td class="left">旋转:</td>  
    <td><input type="range" min="-360" max="360" id="range" value="45"/></td>  
  </tr>  
  <tr>  
    <td class="left">rotate:</td>  
    <td>(<span id="persp">45deg</span>)</td>  
  </tr>  
</table>  
</body>  
</html>

以上代码可以演示此属性的用法,比较简单,不多介绍。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部