CSS3 rotate()

admin發表於2018-08-08
CSSS3

關於transform變換更多內容可以參閱CSS3 2D/3D轉換一章節。

此方法用來規定指定元素在二維空間中的旋轉。

既然是二維空間旋轉，所以只能夠圍繞Z軸進行旋轉。

語法結構: 

[CSS] 純文字檢視 複製程式碼
rotate(angle)

引數解析:

angle:規定旋轉的角度；如果為負值，那麼將會逆時針旋轉。

程式碼例項: 

[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;  
}  
#ant{  
  padding:50px;  
  position:absolute;  
  border:1px solid black;  
  background-color:yellow;  
  font-size:12px;  
   
  transform-origin:0px 0px;
  transform:rotate(0deg); 
}  
table{  
  font-size:12px;  
  width:300px;  
  margin-left:120px;  
}  
.left{text-align:right}  
</style>  
<script type="text/javascript">  
function changeRot(value){  
  var ant = document.getElementById('ant');
  var opersp=document.getElementById('persp');  
  ant.style.transform = "rotateZ(" + 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="ant">螞蟻部落</div>  
</div>  
<table>  
  <tr>  
    <td class="left">旋轉:</td>  
    <td><input type="range" min="-360" max="360" id="range" value="0"/></td>  
  </tr>  
  <tr>  
    <td class="left">旋轉角度:</td>  
    <td>(<span id="persp">0deg</span>)</td>  
  </tr>  
</table>  
</body>  
</html>

上面的程式碼利用js演示了transform:rotate()方法的功能。

相關文章