3 2D裝換 重點

知識梳理

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度 ]

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 ]

div 

div:hover 

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

四 縮放 scale

scale 比例 縮放   [skeɪl]

transform: scale(0.5,1);

//

1 數值是倍數
//2 數值後面不需要跟單位
//3 等比例縮放 簡寫乙個值就可以[ 表示 x 和 y 都是這個值]
//4 數值小於1 就是縮小

//

1 不會影響其他的元素
//2 從中心點向四周縮放 [ 最常用 ]
//3 可以設定縮放中心點 transform-origin: left bottom;

div 

img 
img:hover 

li 

li:hover 

RedHat7 0重灌yum並且換源

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