css3 | 淺談transform變換

廣州蘆葦科技web前端發表於2019-01-29
CSSS3ORM

transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。學會transform的使用，才能更好創造出更好的頁面效果。

2D轉換

平移 translate()

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動。

div {
  -ms-transform: translate(50px,100px); /* IE 9 */
  -webkit-transform: translate(50px,100px); /* Safari and Chrome */
  transform: translate(50px,100px);
} 
複製程式碼

旋轉 rotate()

rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

div {
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
  transform: rotate(30deg);
}
複製程式碼

縮放 scale()

scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的引數

div {
  -ms-transform:scale(2,3); /* IE 9 */
  -webkit-transform: scale(2,3); /* Safari */
  transform: scale(2,3); /* 標準語法 */
}
複製程式碼

skew() 斜切

transform:skew( [,]);

包含兩個引數值，分別表示X軸和Y軸傾斜的角度，如果第二個引數為空，則預設為0，引數為負表示向相反方向傾斜。

skewX(<angle>);表示只在X軸(水平方向)傾斜。

skewY(<angle>);表示只在Y軸(垂直方向)傾斜。

div {
  -ms-transform: skew(30deg,20deg); /* IE 9 */
  -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
  transform: skew(30deg,20deg);
}
複製程式碼

matrix() 方法

定義一個變換矩陣，嚴格來講，以上的幾種方法都是matrix()函式的特殊情況。在2D變換中，函式的引數是六個值。

簡單來講，向量來描述空間中的任何一個物件，然後用矩陣來描述空間中的變換。而使某個物件發生運動的方法就是用代表運動的矩陣乘以代表物件的那個向量。也就是說，線上性空間選定基之後，向量刻畫物件，矩陣刻畫物件的運動，用矩陣與向量的乘法施加運動。

舉個例子：

div {
  transform: matrix(a,b,c,d,e,f);
}
複製程式碼

以上程式碼用矩陣表示就是：

enter description here
1547402647196.jpg

元素的初始矩陣為transform: matrix(1,0,0,1,0,0)；也就是這個屬性下元素沒有任何變化。

在引入向量施加運動：

enter description here
1547402937244.jpg

這樣相乘得出兩個式子：

x'=ax+cy+e;
複製程式碼
y'=bx+dy+f
複製程式碼

x'和y'就是元素被施加變換後的位置座標，從這個式子不難看出，如果我們想把x'增加100，只需要e增加100，那麼元素就會右移100px；

div {
  transform： matrix（1,0,0,1,100,0);
}
複製程式碼

再來看一個縮放的例子，假如我們想元素上每一點的x增加到原來的兩倍，應該將x的係數變為2，即將a設為2，這樣就可以做出水平方向上增大兩倍的效果。

div {
  transform： matrix（2,0,0,1,0,0);
}
複製程式碼

可以看到matrix不同的組合可以做出任何你想要的效果。

transform-origin 屬性

transform-Origin屬性允許您更改轉換元素的位置。

2D轉換元素可以改變元素的X和Y軸。 3D轉換元素，還可以更改元素的Z軸。

transform-origin: x-axis y-axis z-axis;

div{
  -ms-transform: rotate(45deg); /* IE 9 */
  -ms-transform-origin:20% 40%; /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -webkit-transform-origin:20% 40%; /* Safari and Chrome */
  transform: rotate(45deg);
  transform-origin:20% 40%;
}
複製程式碼

3D 轉換

學好3d首先要了解3d效果的座標系：

enter description here
1547405250346.jpg

3d變換的函式與2d類似，只是加上了3d，比如translate變為translate3d；translateZ這表示3d變換中的z軸變換，這些用法和2d基本相同，不在重複，下面是一些3d中比較特殊的屬性

屬性的使用

transform-style：flat|preserve-3d; 規定被巢狀元素如何在 3D 空間中顯示（子元素是否保留3d位置）。

<div id="div1">
  <div id="div2">
  	3dtransform
  </div>
</div>
複製程式碼
# div1{
  height: 200px;
  width: 200px;
  margin: 100px;
  padding:10px;
  border: 1px solid black;
}
# div2{
  margin:50px; 
  border: 1px solid black;
  background-color: red;
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}
複製程式碼

perspective: number|none; 規定 3D元素的透視效果(作用於父元素)。

#div1{
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150;
}
#div2{
  margin:50px;
  border: 1px solid black;
  background-color: yellow;
  transform: rotateX(45deg);
}
複製程式碼

perspective-origin: x-axis y-axis; 規定 3D 元素的底部位置。（作用於父元素，眼睛看元素的方向）

#div1{
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150;
	perspective-origin: 10% 10%;
}
#div2{
	margin:50px;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
}
複製程式碼

backface-visibility：visible | hidden 定義元素在不面對螢幕時是否可見。

-webkit-backface-visibility:hidden;
複製程式碼

matrix3d

在3d變換中的矩陣原來和2d一樣，但是複雜度上升不少，比如一個3d縮放transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)用矩陣表示為：

enter description here
1547405716474.jpg

作者簡介：葉茂，蘆葦科技web前端開發工程師，代表作品：口紅挑戰網紅小遊戲、蘆葦科技官網。擅長網站建設、公眾號開發、微信小程式開發、小遊戲、公眾號開發，專注於前端框架、服務端渲染、SEO技術、互動設計、影像繪製、資料分析等研究。

歡迎和我們一起並肩作戰： web@talkmoney.cn 訪問 www.talkmoney.cn 瞭解更多

相關文章