CSS3 backface-visibility

admin發表於2019-08-01
CSSS3

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>

以上程式碼可以演示此屬性的用法，比較簡單，不多介紹。

相關文章