CSS3 rotate3d(x,y,z,angle)

admin發表於2018-07-27
CSSS33D

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

rotate3d()方法用來規定指定元素在三維空間中的旋轉。

二維空間的旋轉可以參閱CSS3 rotate()一章節。

語法結構:

[CSS] 純文字檢視 複製程式碼
rotate3d(x,y,z,angle)

引數解析:

（1）.x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的向量值。

（2）.y：是一個0到１之間的數值，主要用來描述元素圍繞Y軸旋轉的向量值。

（3）.z：是一個0到１之間的數值，主要用來描述元素圍繞Z軸旋轉的向量值。

（4）.angle：一個角度值，指定在3D空間旋轉角度，正值順時針旋轉，反之元素逆時。

關於前三個向量值的使用需要一定的數學知識，計算方式可以參閱MDN rotate3d()一文。

如果對數學不夠精通，可以分別設定在不同軸的旋轉角度。

程式碼例項如下:

[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;     
  perspective:1200px; 
}  
#inner{  
  padding:50px;  
  position:absolute;  
  border:1px solid black;  
  background-color:yellow;  
  font-size:12px;  
 
  transform-origin:0px 0px;
  transform:rotateX(40deg) rotateY(20deg) rotateZ(10deg);
}   
</style>   
</head>  
     
<body>  
<div id="box">  
  <div id="inner">螞蟻部落</div>  
</div>  
</body>  
</html>

上面程式碼分別在x、y和z軸分別設定旋轉40deg、20deg和10deg，用到了三個拆分方法:

[CSS] 純文字檢視 複製程式碼
rotateX(40deg) 
rotateY(20deg) 
rotateZ(10deg)

相關文章