前端第十四課--transform樣式詳解

transform樣式詳解

transform屬性應用於元素的2D或3D轉換；

變化樣式：**旋轉(rotate)；縮放(scale)；移動(traslate)；傾斜(skew)；

旋轉：

1.默認是繞中心旋轉；

2.transform:rotate(20deg);正值順時針旋轉，負值逆時針旋轉；

縮放：

1.原點默認爲中心點；

2.transform:scale(x,y);裏面的值是倍數；

transform：scaleX(2);橫向放大

transform: scaleY(3):縱向放大；

3.倍數>1:元素放大 1>倍數>0：元素縮小 -1<倍數<0:元素倒置縮小 倍數<-1：元素倒置放大

位移：

位移的數軸是以元素原始樣式平行於瀏覽器的寬的是x軸，平行於高的是y軸；

transform:translate(40px,40px);

定義元素水平方向偏移量：translateX();

定義元素垂直方向偏移量：translateY();

傾斜：

1.transform:skew(x,y);值爲角度；

transform:skewX(20deg);

transform:skewY(20deg);

2.關於x的傾斜，首先傾斜軸是y軸，正值逆時針，反之順時針；平行於x軸的直線不傾斜；

關於y的傾斜，首先傾斜軸是x軸，正值向前，反之向後；平行於y軸的直線不傾斜；

複合寫法：

複合寫法沒有規定書寫順序，但書寫順序會影響最終效果；

變化原點樣式：

1.默認值transform-origin:50% 50%;

水平中心和垂直中心線的交叉點；

2.transform-origin:0% 0%；(左上角爲原點)

3.值爲負數的時候原點在外面：transform-origin:-100% -100%;

-origin:-100% -100%;

[外鏈圖片轉存中…(img-eFL3TT2N-1582658221647)]