2.1 transform-origin 屬性
在 CSS 中，transform-origin 屬性定義了轉換的基準點，像是 rotate、scale、skew 和 translate。預設情況下，該基準點位於元素的中心，但你可以改變它的位置來實現所需的視覺效果。
transform-origin 基礎知識
transform-origin 屬性的語法：
element {
transform-origin: x-axis y-axis z-axis;
}
其中：
x-axis: 定義水平軸上的基準點位置y-axis: 定義垂直軸上的基準點位置z-axis: 定義 Z 軸上的基準點位置（用於 3D 轉換）
可能的值：
- 關鍵字:
top,right,bottom,left,center - 百分比值: 以元素大小的百分比設置基準點
- 絕對值: 以像素或其他單位設置基準點
值的範例：
transform-origin: 50% 50%;— 元素的中心（默認值）transform-origin: 0 0;— 元素的左上角transform-origin: 100% 100%;— 元素的右下角transform-origin: 50px 100px;— 從左上角右移 50 像素、下移 100 像素
基準點的中心化（默認情況）
在這個例子中，rotate 轉換將圍繞元素的中心進行。
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;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 基準點的偏移
基準點偏移到左上角
在這個例子中，轉換的基準點偏移到了元素的左上角。
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: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
基準點偏移到右下角
在這個例子中，轉換的基準點偏移到了元素的右下角。
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: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 設定值
使用百分比值
在這個例子中，轉換的基準點位於水平 25%、垂直 75%的位置。
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: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
使用絕對值
在這個例子中，轉換的基準點水平偏移 50 像素、垂直偏移 20 像素。
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: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 實際應用
圍繞特定點旋轉元素
使用 transform-origin 很適合創建需要圍繞特定點旋轉的元素。例如，創建時鐘的指針。
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>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* 例：1 點鐘位置 */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
創建可縮放的元素
改變基準點對於不同點的縮放也是很有用的，這在創建動態介面中可能很有幫助。
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: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION