基礎知識
#座標系統
要使用元素變形操作需要掌握座標軸,然後通過改變不同座標來控制元素的變形。
- X軸是水平軸
- Y軸是垂直軸
- Z軸是縱深軸
#變形操作
使用 transform
規則控制元素的變形操作,包括控制移動、旋轉、傾斜、3D轉換等,下面會詳細介紹每一個知識點。
下面是CSS提供的變形動作。
選項 | 說明 |
---|---|
none | 定義不進行轉換。 |
translate(x,y) | 定義 2D 轉換。 |
translate3d(x,y,z) | 定義 3D 轉換。 |
translateX(x) | 定義轉換,只是用 X 軸的值。 |
translateY(y) | 定義轉換,只是用 Y 軸的值。 |
translateZ(z) | 定義 3D 轉換,只是用 Z 軸的值。 |
scale(x,y) | 定義 2D 縮放轉換。 |
scale3d(x,y,z) | 定義 3D 縮放轉換。 |
scaleX(x) | 通過設置 X 軸的值來定義縮放轉換。 |
scaleY(y) | 通過設置 Y 軸的值來定義縮放轉換。 |
scaleZ(z) | 通過設置 Z 軸的值來定義 3D 縮放轉換。 |
rotate(angle) | 定義 2D 旋轉,在參數中規定角度。 |
rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
rotateX(angle) | 定義沿着 X 軸的 3D 旋轉。 |
rotateY(angle) | 定義沿着 Y 軸的 3D 旋轉。 |
rotateZ(angle) | 定義沿着 Z 軸的 3D 旋轉。 |
skew(x-angle,y-angle) | 定義沿着 X 和 Y 軸的 2D 傾斜轉換。 |
skewX(angle) | 定義沿着 X 軸的 2D 傾斜轉換。 |
skewY(angle) | 定義沿着 Y 軸的 2D 傾斜轉換。 |
perspective(n) | 爲 3D 轉換元素定義透視視圖。 |
#變形疊加
重複設置變形操作時只在原形態上操作。
#默認處理
下面設置了兩次移動,並不會移動 550px 而是隻移動50px。
<style>
div {
transform: translateX(500px);
width: 100px;
height: 100px;
background: #9b59b6;
}
div:nth-child(1) {
transform: translateX(50px);
}
</style>
<div></div>
#僞類疊加
<style>
div {
transition: 2s;
transform: translateX(200px) translateX(50px);
width: 100px;
height: 100px;
background: #9b59b6;
}
div:hover {
transition: 2s;
transform: translateX(100px);
}
</style>
<div></div>