CSS3 2D/3D 轉換

admin發表於2019-04-20
CSSS33D

transform變換分為2D變換與3D變換。

很容易理解2D變換是在二維空間進行，3D變換則是在三維空間。

建議在閱讀完本文後閱讀CSS3 transform 屬性一章節，瞭解變換的實質。

一.transform 2D變換：

2D變換比較簡單一些，是在一個平面對元素進行的操作。

可以對元素進行水平或者垂直位移、旋轉或者拉伸，非常的簡單。

首先明確一下CSS中的座標系，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/225208obyhnzqphq08dwwh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上面座標系簡單分析如下：

（1）.預設狀態下，x軸是水平的，向左為正。

（2）.預設狀態下，y軸是垂直的，向下為正，這與傳統的數學座標系不同。

之所以強調是預設狀態下，是因為座標系並不總是橫平豎直，這一切可以被改變。

想要了解原因和實現方式可以參閱CSS3 transform 屬性一章節。

2D變換涉及到很多屬性與函式，本文不會進行介紹，可以參閱如下相關文章：

（1）.CSS translate(x)一章節。

（2）.CSS scale(x,y)一章節。

（3）.CSS rotate()一章節。        

（4）.CSS skew()一章節。

（5）.CSS transform-origin一章節。

二.transform 3D變換：

3D變換比2D變換多了一個維度，自然也會更為複雜一些。

首先看一個三位空間座標系示意圖：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/225233x9z21u98j86r096h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上面座標系簡單分析如下：

（1）.預設狀態下，x軸是水平的，向左為正。

（2）.預設狀態下，y軸是垂直的，向下為正，這與傳統的數學座標系不同。

（3）.預設狀態下，z軸是朝向螢幕，且垂直於x與y軸形成的平面。

與前面同樣的道理，強調預設狀態是因為上面都是可以改變的，參閱CSS3 transform 屬性一章節。

3D變換涉及到很多屬性與函式，本文不會進行介紹，可以參閱如下相關文章：

（1）.CSS translate3d()一章節。

（2）.CSS scale3d()一章節。

（3）.CSS rotate3d()一章節。

（4）.CSS skew()一章節。

（5）.CSS perspective(n)一章節。                                

（6）.CSS transform-origin一章節。

（7）.CSS transform-style一章節。

（8）.CSS perspective一章節。

（9）.CSS perspective-origin一章節。

（10）.CSS backface-visibility一章節。

三.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>   
<style> 
#box{ 
  height:100px; 
  width:150px; 
  padding:10px; 
  border:1px solid black; 
  perspective:500px; 
} 
#box > div{ 
  width:100px; 
  height:100px; 
  text-align:center; 
  line-height:100px; 
  font-size:12px; 
  border:1px solid black; 
  background-color:yellow; 
  transform:rotateX(40deg);   
} 
</style> 
</head> 
<body> 
<div id="box"> 
  <div>螞蟻部落</div> 
</div>    
</body>   
</html>

上面是一個簡單的3D轉換效果，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/225308qye8s2wy5yylxwuj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

簡單對上述程式碼分析如下：

（1）.rotateX(40deg)設定黃色元素在x軸上旋轉40deg，很明顯是3D旋轉。

（2）.但是如果想要這個旋轉在視覺上有3D效果，必須在其父元素上設定perspective屬性。

上面程式碼極為簡單，目的是讓讀者對變化有一個基本的感受，變換中用到的屬性或者方法可以參閱對應的文章。

如果對本文有任何的建議或者意見，可以在文章底部留言，本站會第一時間回覆，感謝對螞蟻部落的支援。

相關文章