CSS transform-origin

admin發表於2019-04-21
CSSORM

本站一貫的風格是，掌握概念從其名稱入手，本文也不例外。

屬性transform-origin由單詞transform與origin構成，簡單分析如下：

（1）.transform：說明此屬性與transform變換相關，這個是很顯然的事情。

（2）.origin：翻譯成漢語是"基點"的意思，表示元素變換的基點位置。

此屬性本身非常簡單，關鍵在於對於transform變換實質的掌握，具體參閱CSS transform一章節。

一.知識鋪墊：

在CSS transform一章節已經介紹，transform變換是在一個變換座標系進行的。

預設狀態下，變換座標系的原點位於元素的中心位置，簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/21/205949gexrgq1gznbqnueg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

座標系簡單分析如下：

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

（2）.預設狀態下，y軸是垂直的，向下為正。

（3）.座標系的原點位置在元素中心。

transform-origin屬性就是用來改變transform變換座標系的位置的。

二.transform-origin屬性：

此屬性用來改變變換的原點座標，預設原點座標在元素的中心。

語法結構：

[CSS] 純文字檢視 複製程式碼
transform-origin: x y z;

屬性值解析如下：

（1）.x：規定原點在元素中水平方向位置，預設是值50%，允許的值是left、center、right、length和%。

（2）.y：規定原點在元素中垂直方向位置，預設是值50%，允許的值是top、center、bottom、length和%。

（3）.z：規定原點在元素中z軸方向位置，預設是值0，允許的值只有length方式，這一點需要特別注意。

需要注意的是，變換座標系的原點位置預設是（0,0）點，假設分別向右和向下移動了50畫素，不能說此時變換座標系的原點位置變為(50,50)，座標系的原點座標依然是（0,0），只是相對於以前的原點位置發生了位移而已。

屬性值格式：

有三個屬性值，並且屬性值可以有多種資料型別，下面對屬性值的組合進行一下簡單說明：

（1）.屬性值有三種型別，百分比，length和關鍵字。

（2）.如果只有一個屬性值，剩餘的屬性值都是預設值。

（3）.如果有兩個屬性值，那麼很明顯是用於前兩個引數，第三個屬性值預設為0。

（4）.如果屬性值為關鍵字，且方向明確，那麼順序就不重要了，比如left、top、right和bottom，center則不可以。

[CSS] 純文字檢視 複製程式碼
transform-origin:right bottom;

上面的屬性值順序可以顛倒過來，修改如下：

[CSS] 純文字檢視 複製程式碼
transform-origin:bottom right ;

再來看一個加深一下理解，值設定一個屬性值top：

[CSS] 純文字檢視 複製程式碼
transform-origin:top;

上面程式碼等同於如下程式碼：

[CSS] 純文字檢視 複製程式碼
transform-origin:50% top;

因為top是具有明確方位的，用於垂直方向。

瀏覽器支援：

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項如下:

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

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/21/181349kz0tpqp94qnny3nu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼簡單分析如下：

（1）.預設狀態下，變換座標系的原點在元素的中心位置。

（2）.通過rotate旋轉45deg也就是讓元素圍繞圓心旋轉45deg。

千萬不要想當然的認為，變換座標系的原點位置在元素的左上角，於是圍繞左上角旋轉。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  margin:50px;
  width:100px;
  height:100px;
  background-color:blue;
  position: absolute;
  top:0px;
  left:0px;
}
.ant {
  transform:rotate(10deg);
  transform-origin:left top;
}
.origin {
  opacity: 0.1;
}
</style>
</head>
<body>
<div class="origin"></div>
<div class="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/21/181412vc2p2321j1d93aa4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上述程式碼分析如下：

（1）.上述程式碼中將ant元素的變換原點設定到元素的左上角。

（2）.通過rotate將元素旋轉10deg，也就是圍繞它的左上角旋轉10deg。

（3）.為了便於觀察效果，在ant元素的預設位置放置了一個具有透明度的元素。

相關文章