3 2D裝換 重點

2022-06-08 23:54:23 字數 2313 閱讀 4294

知識梳理

translate   //

1 位移

rotate    //

2 旋轉

scale    //

3 縮放

transform-origin //

4 設定旋轉中心

一  平移 [ translate ]

div 

重點

1 translate最大的優點 不會影響其他元素的位置

2 transform: translate(50%,50%); 百分比引數 是基於元素自身的寬 高的比例

3 translate 對行內元素無效
小demo [ 子盒子水平垂直居中 ]

定位 + translate 配合使用

//讓子盒子垂直居中 水平居中

class="

father

">

class="

son">

二 旋轉[ rotate ]

rotate [ˈroʊteɪt]  v.(使)旋轉,轉動;(工作)由…輪值;(人員)輪換,輪值

讓元素在2維平面內順時針或逆時針旋轉

語法:transform:rotate(旋轉的度數 );

使用要點

//

1 rotate裡面寫的是角度,單位是 deg(角度),例如:rotate(45deg);

//2 角度為正值時,順時針旋轉,為負值時,逆時針旋轉

//3 預設旋轉的中心點是元素的中心點

小demo[ 滑鼠放上旋轉360度 ]

小三角 demo

div 

div::after

滑鼠經過div 三角旋轉

div:hover::after

三 設定旋轉中心點

origin 起源 由來  n. 起源;源頭;起因;身世;出身  [ˈɔːrɪdʒɪn]

transform-origin: x軸 y軸;

使用要點

//

1 x軸 和 y軸 中間用空格分割

//2 預設值 x y 都是50%

//3 引數值可以是 數值 百分比 和 方位名詞 [top center bottom left right ]

小demo 改變旋轉中心點

div 

div:hover

小demo

滑鼠經過 粉色盒子右側慢慢移動到左上角

四 縮放 scale

scale 比例 縮放   [skeɪl]
transform: scale(0.5,1);

要點

//

1 數值是倍數

//2 數值後面不需要跟單位

//3 等比例縮放 簡寫乙個值就可以[ 表示 x 和 y 都是這個值]

//4 數值小於1 就是縮小

優點

//

1 不會影響其他的元素

//2 從中心點向四周縮放 [ 最常用 ]

//3 可以設定縮放中心點 transform-origin: left bottom;

小demo[ 滑鼠經過放大 ]

div 

img

img:hover

小demo  翻頁

li 

li:hover

實現效果

RedHat7 0重灌yum並且換源

rpm qa grep yum rpm qa grep yum xargs rpm e nodeps 首先檢視本機的版本號,找到與本機對應的安裝包 映象資源一直在更新,相應版本軟體包如果找不到,可以根據軟體包名稱在相應目錄中找最新版本的 cat etc redhat release python u...