4.2 2d轉換之移動translate
2d移動是2d轉換裡面的一種功能,可以改變元素在頁面中的位置,類似定位
1.語法
transform: translate(x,y);
transform: translatex(n);
transform: translatey(n);
2.重點
定義2d轉換中的移動,沿著x和y軸移動元素
translate最大的優點:不會影響其他元素的位置
translate中的百分比單位是相對於自身元素的translate:(50%,50%);
對行內標籤沒有效果
4.3 2d轉換之元素轉換中心點rotate
旋轉360°
transform: rotate(360deg);
4.4 2d轉換之縮放scale
1.裡面寫的數字不跟單位 就是倍數的意思 1 就是1倍 2就是2倍
transform: scale(x, y);
transform: scale(2, 2);
2.修改了寬度為原來的2倍 高度 不變
transform: scale(2, 1);
3.等比例縮放 同時修改寬度和高度,我們有簡單的寫法 以下是寬度修改了2倍,高度預設和第乙個引數一樣
transform: scale(2);
4.我們可以進行縮小 小於1 就是縮放
transform: scale(0.5, 0.5);
transform: scale(0.5);
5.scale 的優勢之處: 不會影響其他的盒子 而且可以設定縮放的中心點
width: 300px;
height: 300px;
transform: scale(2);
6.可以設定縮放時的中心點
transform-origin: left bottom;
4.6 2d旋轉綜合寫法
1.同時使用多個轉換,其格式為:transform:translate() rotate() scale() …等,
2.其順序會影響轉換的效果.(選旋轉會改變座標軸方向)
3.當我們同時有位移和其他屬性的時候,記得要將位移放到最前
CSS之2D轉換模組
參考w3手冊 transform 屬性向元素應用從2d 或3d轉換。該屬性允許我們對元素進行旋轉 縮放 移動或者傾斜。預設情況下所有元素都是圍繞z軸進行旋轉，如果想圍繞哪個軸旋轉，那麼只需要在rotate後面加上哪個軸即可。如 transform rotatez 45deg transform ro...
2D轉換 3D轉換
轉換是使元素改變形狀 尺寸和位置的一種效果。能夠對元素進行移動 縮放 轉動 拉長或拉伸。2d轉換 瀏覽器相容 1 internet explorer 10 firefox 以及 opera 支援 transform 屬性。2 chrome 和 safari 需要字首 webkit 3 interne...
2D轉換及動畫
可以實現移動 旋轉 放縮效果的特徵 移動類似於定位，可以改變元素在頁面中的位置。語法 transform translate x,y 也可分開寫 transform translatex n transform translatey n 特點 旋轉是指讓元素在二維平面上順時針或逆時針旋轉 語法 tr...