一、css3變形：
transform:rotate(旋轉)|scale(縮放)|skew(傾斜)|translate(位移);
注：當多種變形方式綜合在一起時，用空格隔開
1.旋轉
a) rotatex(180deg) 沿x軸翻轉 等價於 rotate3d(1,0,0,180deg)
b) rotatey(180deg) 沿y軸翻轉 等價於 rotate3d(0,1,0,180deg)
c) rotate(60deg) 2d空間的旋轉，正值為順時針，負值為逆時針
d) rotatez(180deg) 沿z軸翻轉 等價於 rotate3d(0,0,1,180deg)
注：旋轉單位為deg
2.縮放
a) scalex(1.5) 沿x軸縮放，預設為1，不放大不縮小，值大於1時放大，小於1時縮小
b) scaley(0.5) 沿y軸縮放
c) scale(1.5) 沿x軸和y軸同時縮放
d) scalez(1.5) 沿z軸縮放
3.傾斜
a) skewx(30deg) 沿x軸傾斜，單位為deg
b) skewy(-30deg) 沿y軸傾斜
c) skew(30deg,15deg) 沿x軸和y軸同時傾斜
skewx(30deg) skewy(15deg) x軸和y軸同時傾斜，效果不同於上面的寫法
4.位移
a) translatex(200px) 沿x軸位移，向右為正，向左為負
b) translatey(-200px) 沿y軸位移，向上為負，向下為正
c) translate(100px) 預設不指定軸時，沿x軸位移
translate(100px,100px) 沿x軸和y軸同時位移
等價於
translatex(100px) translatey(100px)
d) translatez(100px) 沿z軸位移，向前為正，向後為負，設定沿z軸的位移時，需要給父元素新增透視
注：如何使用translate實現不定寬高元素在螢幕視窗或父元素中水平垂直都居中
實現方式如下：
元素二、改變變形中心點位置
transform-origin:left|center|right top|center|bottom;
三、變形綜合
當我們將多種變形方式結合在一起時，改變順序，效果有可能會不同
eg: transform:rotate(360deg) scale(1.5); 調換順序，效果一樣
transform:translatex(500px) rotate(360deg); 調換順序，效果不一樣
四、設定元素在2d空間變形還是3d空間變形
語法： transform-style:flat(預設值)|preserve-3d;
flat 2d變形
preserve-3d 3d空間的變形
五、透視，井深
描述：用來設定觀察者距離物體的距離(3d效果的強度)
語法：父元素
子元素
從零開始學習web前端開發
之前半個月一直在學習深度學習，但是感覺自己的能力還沒到那個程度所以就想擱置一下，從程式設計師基礎的前端開發來學。廢話不多說直接開記 我所使用的前端開發軟體就是業內很流行的vscode，作為小白的我當然也是用的這個 具體的安裝教程，外掛程式教程網上都有詳細的介紹，在此處不多講 在vscode中輸入 就...
從零開始學習前端開發 3 CSS盒模型
css盒模型是css的基石，每個html標籤都可以看作是乙個盒模型。css盒模型是由內容 content 補白或填充 padding 邊框 border 外邊距 margin 四部分組成 1.內容 content 寬度 width 數值 單位 高度 height 數值 單位 eg box 2.補白或...
從零開始的wed前端學習 css基礎
繼承性 層疊性 可被覆蓋 1.後來者居上原則 後來的樣式覆蓋先前的樣式,越往後越說的算 2.行內樣式優先順序大於頭部樣式與外部樣式 3.頭部樣式優先順序大於等於外部樣式 因為後來者居上原則頭部樣式優先順序大於外部樣式 4.越精確越說的算,id選擇器 class類選擇器 標籤選擇器 5.importa...