CSS變形轉換 學習筆記

2021-09-02 18:39:29 字數 1153 閱讀 8818

css的變形轉換

屬性:transform

一、translate-位移 常用 該屬性值有三種型別:「translatex」translatey」和「translate。「translate」可以作用於已經執行了「絕對定位(position:absolute)」的元素,而要用「position」已經設定為了「絕對定位」的元素使用「相對定位(position:relative)」需要對布局進行重新計算,或修改dom的標籤巢狀方式。

二、transform之縮放scale

該屬性值會讓元素以當前元素的中心進行縮放,引數的值為乙個整數或浮點數,如:「1(預設)」不進行縮放,「0.8」縮小為原來的80%,「1.5」擴大到原來的150%,引數不需要單位。

該屬性值有三種型別:「scalex」、「scaley」和「scale」:「scalex」設定元素在x軸方向的縮放,「scaley」設定元素在y軸方向的縮放,「scale」可以同時設定元素在x軸和y軸方向的縮放,引數間用逗號「,」進行分隔。

三、transform之旋轉rotate 常用

該屬性值會讓元素以當前元素的中心(x=width/2,y=height/2)進行旋轉(若不對「transform-origin」進行設定),旋轉的角度為引數所設定的值,「正數」是順時針,「負數」是逆時針,單位為「deg」。該屬性值有三種型別:「rotatex」、「rotatey」和「rotate(也作rotatez)」:「rotatex」設定元素在x軸方向的旋轉,「rotatey」設定元素在y軸方向的旋轉,「rotate」設定元素在z軸(垂直於元素平面的線)方向的旋轉。

三、 transform之傾斜 skew

該屬性值會讓元素根據水平(x軸)和垂直(y軸)線引數設定傾斜角度。該屬性值有三種型別:「skewx」、「skewy」和「skew」。「skewx」只有乙個引數,用於控制元素在水平軸方向的傾斜,「skewy」只有乙個引數,用於控制元素在垂直軸方向的傾斜,「skew」有兩個引數(乙個引數相當於「skewx」),分別控制元素在水平和垂直軸方向的傾斜,引數間用逗號「,」進行分隔。

四、組合值

五、變換原點「transform-origin」

六、3d巢狀樣式「transform-style」

七、3d透視「perspective」和「perspective-origin」

八、3d翻轉背面可見性「backface-visibility」

常用資料轉換 學習筆記

使用opencv進行資料處理後返回的畫素點值為 b,g,r 使用pil.image進行資料處理後返回的畫素點的值為 r,g,b 將某點的 b,g,r 轉換為 r,g,b 用到倒敘轉換 dominant color bgr dominant color rgb 1 pil.image opencv i...

層次查詢 行列轉換學習筆記

level 語法 select level column,expr.from table where condition start with condition connect by prior column1 column2 column1 prior column2 舉例 按照級別對emp員工...

c 強制型別轉換 學習筆記

c 強制型別轉換分為四種,static cast,dynamic cast,const cast,reinterpret cast 一.為什麼在c 中還有特殊的四種強制轉換 二.static cast include iostream intmain 三.const cast include ios...