CSS transform 屬性

admin發表於2019-04-20
CSSORM

此屬性是CSS3新增，transform翻譯成漢語具有"變換"或者"改變"的意思。

通過此屬性具有非常強大的功能，比如可以實現元素的位移、拉伸或者旋轉等效果。

最能體現transform 屬性強大實力的是實現元素的3D變換效果。

本文並不會過多介紹變換的細節問題，而是分析一下transform變換的實質。

關於transform變換的細節可以參閱CSS 2D/3D轉換一章節。

一.transform變換實質：

不少朋友可能對於變換有著比較熟練的應用，但是對於其實質並不真正瞭解。

比如translate位移操作，很多朋友認為是對於元素簡單的水平或者垂直位移操作。

視覺上確實如此，但本質上並不止位置變換這麼簡單。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#ant {
  width:200px;
  height:100px;
  background-color:#ccc;
  transform:translate(295px,115px);
}
</style>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

上面程式碼非常簡短，分析如下：

（1）.通過translate將div元素向左和向下分別移動295畫素和115畫素。

（2）.在視覺上實現了div元素的位移效果。

（3）.事實上transform是針對元素所在變換座標系的操作，所以上述位移也是對整個座標系的位移。

（4）.也就是說整個座標系都發生了位移，而不是元素在座標系中位移。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/214248w7z7p5kpxkh7dhkk.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面介紹一下上面程式碼transform變換的實質：

（1）.預設狀態下，變換座標系的原點（0,0）位於元素的中心位置，如上圖紅色元素的中間紅點位置。

（2）.變換是對整個變換座標系，上述程式碼將座標系向左和向下分別移動了295畫素和115畫素。

（3）.原來座標系原點的位置是（0,0），變換之後座標系原點座標依然是（0,0），這一點要注意。

原點位置預設在元素的中心點，不過可以通過transform-origin屬性改變原點的位置。

下面再來看一段程式碼例項，對前面知識進行一下加強：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant {
  width:100px;
  height:100px;
  background-color:#ccc;
  transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

上面程式碼通過rotate對元素實現了旋轉效果，簡單分析如下：

（1）.很多時候感覺座標系都是橫平豎直的，這只是預設情況而已。

（2）.rotate在視覺上實現了元素的旋轉，實質上是將整個座標系進行了旋轉。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/214327ufa1g5emh25q1nff.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對於元素的拉伸操作下面就不再舉例子了，實質上是對整個座標系的拉伸。

由此我們也可以得出，眼見為實這句話並不總是正確，可能會隱藏著一些其他東西。

二.程式碼例項：

前面雖然在理論上介紹了變換是針對整個座標系的，可能有些朋友存在疑惑。

下面通過一段簡單的程式碼例項進行一下證明，程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant {
  width:100px;
  height:100px;
  background-color:#ccc;
  transform:translate(150px,0) rotate(45deg);
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

簡單圖示如下：

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

物件上述程式碼分析如下：

（1）.首先向左移動150畫素，然後再進行旋轉操作。

（2）.由於旋轉是圍繞原點進行的，如果不是座標系的變換，那麼旋轉是以最初原點位置為中心。

（3）.那麼旋轉後的元素，就是上圖灰色元素所在的位置，如果是座標系的變換，旋轉後就是紅色元素位置。

上面對變換的實質進行了較為詳盡的介紹，如果對本文有任何疑問或者意見可以在文章底部留言。

相關文章