2D轉(zhuǎn)換CONTENTS旋轉(zhuǎn)變形01縮放變形02斜切變形03位移變形04旋轉(zhuǎn)變形旋轉(zhuǎn)變形transform:rotate(90deg);旋轉(zhuǎn)角度將transform屬性的值設(shè)置為rotate(),即可實(shí)現(xiàn)旋轉(zhuǎn)變形若角度為正，則順時(shí)針方向旋轉(zhuǎn)，否則逆時(shí)針旋轉(zhuǎn)旋轉(zhuǎn)變形transform:rotate(45deg);transform:rotate(-45deg);旋轉(zhuǎn)變形旋轉(zhuǎn)變形默認(rèn)的旋轉(zhuǎn)圓心是元素的正中心可以使用transform-origin屬性設(shè)置自定義的旋轉(zhuǎn)圓心旋轉(zhuǎn)圓心旋轉(zhuǎn)變形transform:rotate(45deg);transform:rotate(45deg);transform-origin:0100%;水平坐標(biāo)垂直坐標(biāo)縮放變形縮放變形transform:scale(2);縮放倍數(shù)將transform屬性的值設(shè)置為scale()，即可實(shí)現(xiàn)縮放變形縮放變形transform:scale(2);數(shù)值大于1表示放大元素；數(shù)值小于1表示縮小元素transform:scale(0.75);縮放變形transform:scaleX(2)縮放變形也可以只縮放寬度，或只縮放高度scaleX()方法增加或減少元素的寬度scaleY()方法增加或減少元素的高度transform:scaleY(0.75)斜切變形斜切變形transform:skew(10deg,20deg);x斜切角度將transform屬性的值設(shè)置為skew()，即可實(shí)現(xiàn)斜切變形y斜切角度斜切變形transform:skew(20deg,0);x為正，上邊向左斜切，x為負(fù)，上邊向右斜切transform:skew(-20deg,0);當(dāng)只有一個(gè)參數(shù)的時(shí)候，為水平斜切，第二個(gè)參數(shù)默認(rèn)為0斜切變形transform:skew(0,20deg);y為正，左邊向上斜切，y為負(fù)，左邊向下斜切transform:skew(0,-20deg);位移變形位移變形transform:translate(100px,200px);水平移動將transform屬性的值設(shè)置為translate()，即可實(shí)現(xiàn)位移變形垂直移動位移變形transform:translate(10px,20px);x為正向右，x為負(fù)向左；y為正向下，y為負(fù)向上；transform:translate(-10px,-20px);位移變形transform