普歌-赤道團隊:對CSS-2D轉換的總結
阿新 • • 發佈：2021-02-11
普歌-赤道團隊：CSS3-2D轉換(移動，旋轉，縮放）
CSS-2D轉換是什麼？二維座標系是什麼？
轉換(transform)是css中具有顛覆性的特徵之一，可以實現元素的位移，旋轉，縮放等效果。
也可以把轉換簡單的理解為變形
一、要了解CSS-2D轉換，首先要明白二維座標系
在CSS中，二維座標系是不同於數學中的座標系哦！
如圖：(上邊為數學中的座標軸，下邊為二維座標系)
1.位移(translate)
位移即為移動，移動盒子的位置我們學過三種方法：
- 定位
- 盒子的外邊距
- 2D轉換移動
位移的語法：
- transform:translate(x,y);
- transform:translate(x,y);
- 3.transform:translate(x,y);
程式碼如下（示例）：
<style>
div {
/*我們此處準備了一個寬和高均為200畫素的粉色盒子*/
width: 200px;
height: 200px;
background-color:pink; 2D位移中的重點：
- 定義2D轉換中的移動，沿著X和Y軸移動元素
- trasnslate最大的優點，並不會影響到其他元素的位置
- translate中的百分比單位是相對於自身元素的translate:(50%,50%)
- 對於是行內標籤沒有的效果
2.旋轉(rotate)
2D旋轉是指讓元素在二維平面內順時針或者逆時針旋轉
旋轉的語法：
transfrom:rotade(度數)
程式碼如下（示例）：
此處樓主向body裡面新增一張圖片，有利於顯示旋轉效果，並且給圖片加入了五畫素的粉色圓形邊框，加入了0.3秒的過渡，滑鼠移動到圖片上方即可看到效果。
<style>
img {
width: 150px;
/*順時針旋轉45°*/
/* transform:rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 過渡寫到本身上，誰做動畫給誰加 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./pic.jpg" alt="">
</body>
- rotate裡面跟度數，單位是deg 示例：rotate(45deg);
- 角度為正時，順時針，角度為負時，為逆時針。
- 預設旋轉角度的中心點是元素的中心點
3.縮放(scale)
縮放，顧名思義，可以放大和縮小。只要給元素新增這個屬性就可以控制它是放大還是縮小。
縮放的語法：
transfrom:scale(x,y);
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transform-origin: left bottom;
}
div:hover {
/* 1.裡面寫的數字不跟單位，就是倍數的意思 1就是1倍 2就是2倍 */
/* transform:scale(x,y); */
/* transform:scale(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的優勢:不會影響其他盒子，而且不會影響盒子中心點 */
}
</style>
</head>
<body>
<div></div>
</body>
縮放中的注意點：
- 注意其中的X和Y用逗號隔開
- transfrom:scale(1,1);寬度和高度都放大一倍，也就是沒有變
- transfrom:scale(2,2);寬度好高度都放大的兩倍
- transfrom:scale(2)只寫了一個引數，第二個引數則和人第一個引數一樣，相當於scale(2,2);
- transfrom:(0.5,0.5);寬度與高度都縮小0.5倍
- scale縮放的最大優勢，可以設定轉換中心點縮放，而且不影響其他盒子
大家喜歡的話點個贊，評論一下哇！謝謝支援！
本文僅僅簡單介紹了CSS-2D轉換中，位移(translate)，旋轉(rotate)， 縮放(scale)的使用。希望各位前端攻城獅給作者多提一些建議，文中有錯誤或者不當之處，評論區裡請留言，作者定會及時改正！謝謝！ 另外祝大家2021年，牛年大吉，牛運亨通！