transform的含義是：改變，使…變形；轉換
在排版當中去合理的使用transform會使我們的排版看起來高大上那麼一點。
接下來給大家介紹一下這個神奇的小東西都有什麼屬性會有什麼效果。
rotate：通過指定的角度引數對原元素指定乙個效果。
如果設定的值為正數表示順時針旋轉，如果設定的值為負數，則表示逆時針旋轉。如：transform:rotate(30deg)；
translate() 根據左(x軸)和頂部(y軸)位置給定的引數，從當前元素位置移動。
如：transform:translate(100px,20px):
通過給定乙個x方向上的數目指定乙個translation。只向x軸進行移動元素，同樣其基點是元素中心點，也可以根據transform-origin改變基點位置
通過給定y方向的數目指定乙個translation。只向y軸進行移動，基點在元素心點，可以通過transform-origin改變基點位置。
縮放scale和移動translate是有點相似的，也是有三種情況：下面我們具體來看看這三種情況具體使用方法：
注意：預設值是1，它的值放大是比1大，縮小比1小。
1、scale(x,y) 定義 2d 縮放轉換，改變元素的寬度和高度。
如：transform:scale(2,1.5);
2、scalex(n) 定義 2d 縮放轉換，改變元素的寬度。
如：transform:scalex(2):
3、scaley(n) 定義 2d 縮放轉換，改變元素的高度。
如：transform:scaley(2):
1、skew(x-angle,y-angle) 定義 2d 傾斜轉換，沿著 x 和 y 軸。
如：transform:skew(30deg,10deg);
2、skewx(angle) 定義 2d 傾斜轉換，沿著 x 軸。
如：transform:skewx(30deg);
3、skewy(angle) 定義 2d 傾斜轉換，沿著 y 軸。
如：transform:skewy(10deg);
matrix(, , , , , ) ： 以乙個含六值的(a,b,c,d,e,f)變換矩陣的形式指定乙個2d變換，相當於直接應用乙個[a b c d e f]變換矩陣。就是基於水平方向（x軸）和垂直方向（y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。
改變元素基點 tranform-origin
改變元素基點transform-origin
前面我們多次提到transform-origin這個東東，他的主要作用就是讓我們在進行transform動作之前可以改變元素的基點位置，因為我們元素預設基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進行變化的。但有時候我們需要在不同的位置對元素進行這些操作，那麼我們就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在是中心位置，以達到你需要的基點位置。下面我們主要來看看其使用規則：
transform-origin(x,y):用來設定元素的運動的基點（參照點）。預設點是元素的中心點。其中x和y的值可以是百分值,em,px，其中x也可以是字元引數值left,center,right；y和x一樣除了百分值外還可以設定字元值top,center,bottom，這個看上去有點像我們background-position設定一樣；下面我列出他們相對應的寫法：
1、top left | left top 等價於 0 0 | 0% 0%
2、top | top center | center top 等價於 50% 0
3、right top | top right 等價於 100% 0
4、left | left center | center left 等價於 0 50% | 0% 50%
5、center | center center 等價於 50% 50%（預設值）
6、right | right center | center right 等價於 100% 50%
7、bottom left | left bottom 等價於 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等價於 50% 100%
9、bottom right | right bottom 等價於 100% 100%
其中 left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取乙個值，表示垂直方向值不變，我們分別來看看以下幾個例項
(1)transform-origin:(left,top):
(2)transform-origin:right
(3)transform-origin(25%,75%)
pythonpip使用方法 pip使用方法整理
匯出專案已安裝的pip包 pip list 檢視專案中安裝的包 pip freeze requirements.txt 將專案中所用到的第三方庫輸出到requirements.txt中 pip install 版本號 pip install i 本次使用清華源進行安裝 離線安裝第三方庫 一鍵安裝整個...
機械秒錶的使用方法 秒錶的使用方法！
秒錶是一種常用的測時儀器。又可稱 機械停表 由暫停按鈕 發條柄頭 分針等組成。它是利用擺的等時性控制指標轉動而計時的。它是利用擺的等時性控制指標轉動而計時的。在它的正面是乙個大表盤，上方有乙個小表盤 圖1.4 2 秒針沿大表盤轉動，分針沿小表盤轉動。分針和秒針所指的時間和就是所測的時間間隔。在表正上...
Transform使用詳解
在react native開發中，我們可以通過transform的設定來實現元件 包括文字，影象 的變形。1.平移 translate translatex 沿x軸方向平移 translatey 沿y軸方向平移 例如 class main extends component const styles...