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 像素向下
中心起始点（默认）
在这个例子中，旋转变换将围绕元素的中心进行。
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