1.1 屬性 transform
CSS 轉換允許改變元素的位置、大小、旋轉和傾斜，而不改變它們在文檔中的普通流動。這是一個創建互動和動態 Web 介面的強大工具。我們來看看使用屬性 transform、translate、rotate、scale 和 skew 的轉換基礎。
屬性 transform 允許對元素應用二維和三維轉換。它結合了各種轉換功能，如 translate、rotate、scale 和 skew。
語法：
element {
transform: transformation-function;
}
其中：
transformation-function: 應用於元素的轉換功能
使用範例：
CSS
.element {
transform: translate(50px, 100px);
}
1.2 轉換 translate
轉換 translate 用於沿著 X 和/或 Y 軸移動元素。
語法：
element {
transform: translate(x, y);
}
其中：
x: 沿 X 軸的移動（可以是負數或正數）y: 沿 Y 軸的移動（可以是負數或正數）
範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轉換 translate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代碼解釋：
.box: 具有固定大小和顏色的元素.box:hover: 當光標懸停在元素上時，應用轉換translate(50px, 50px)，將其向右移動 50 像素並向下移動 50 像素
1.3 轉換 rotate
轉換 rotate 用於圍繞元素的中心旋轉它。
語法：
element {
transform: rotate(angle);
}
其中：
angle: 旋轉的角度（可以是負數或正數）
範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轉換 rotate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代碼解釋：
.box: 具有固定大小和顏色的元素.box:hover: 當光標懸停在元素上時，應用轉換rotate(45deg)，將其順時針旋轉 45 度
1.4 轉換 scale
轉換 scale 用於改變元素在 X 和/或 Y 軸上的大小。
語法：
element {
transform: scale(sx, sy);
}
其中：
sx: 在 X 軸上的縮放（大於 1 的值會增加元素，小於 1 會減小）sy: 在 Y 軸上的縮放（大於 1 的值會增加元素，小於 1 會減小）
範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轉換 scale</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代碼解釋：
.box: 具有固定大小和顏色的元素-
.box:hover: 當光標懸停在元素上時，應用轉換scale(1.5, 1.5)， 將其大小增加 1.5 倍沿兩個軸
1.5 轉換 skew
轉換 skew 用於沿 X 和/或 Y 軸傾斜元素。
語法：
element {
transform: skew(ax, ay);
}
其中：
ax: 沿 X 軸的傾斜角度（可以是負數或正數）ay: 沿 Y 軸的傾斜角度（可以是負數或正數）
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轉換 skew</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代碼解釋：
.box: 具有固定大小和顏色的元素。.box:hover: 當光標懸停在元素上時，應用轉換skew(20deg, 10deg)，將其傾斜 20 度沿 X 軸和 10 度沿 Y 軸。
1.6 合併不同的轉換
屬性 transform 允許合併多個轉換功能以實現複雜效果。
範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合併轉換</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代碼解釋：
.box: 具有固定大小和顏色的元素.box:hover: 當光標懸停在元素上時，將同時應用轉換translate、rotate、scale和skew，創造出複雜效果
GO TO FULL VERSION