通过设置 transform-origin 属性，可以精确指定元素进行旋转、缩放等变换时的原点坐标。该属性接受两个值，分别代表水平（x轴）和垂直（y轴）位置，支持像素、百分比或关键字（如 center、top）。默认情况下，变换原点是元素的中心点（50% 50%），修改这两个值即可将旋转轴心移动到任意相对位置。
使用绝对像素值定位旋转中心
当需要基于元素的几何尺寸固定某个点时，可以使用像素值（px）来定义 transform-origin。例如，若希望一个宽 200px、高 100px 的矩形以其左上角为轴心旋转，可将原点设置为 0 0。这种方式的优点是位置精确且不受父容器影响，适合需要严格对齐的场景。
div {
width: 200px;
height: 100px;
background-color: #3498db;
transform-origin: 0 0;
transform: rotate(45deg);
}
上述代码中，transform-origin: 0 0 将原点锁定在元素的左上角。执行 rotate(45deg) 后，元素会围绕其自身的左上角顺时针旋转 45 度，而不是像默认情况那样围绕中心点旋转。这会导致元素在视觉上向右下方偏移，因为旋转后的边界框发生了变化。
使用百分比值动态调整旋转中心
百分比值相对于元素自身的宽高进行计算，这使得变换原点能够随元素尺寸变化而自动调整。例如，设置 transform-origin: 100% 100% 会将原点置于元素的右下角。这种方式在处理响应式布局或需要根据元素大小动态确定轴心的场景中非常有用，无需手动计算像素值。
div {
width: 200px;
height: 100px;
background-color: #e74c3c;
transform-origin: 100% 100%;
transform: rotate(45deg);
}
在此示例中，transform-origin: 100% 100% 将旋转中心设定在矩形的右下角。当应用 rotate(45deg) 时，元素会围绕右下角顺时针旋转。与像素值不同，即使后续通过媒体查询改变了元素的宽度或高度，只要百分比不变，旋转中心始终保持在右下角，确保了行为的一致性。
结合 translate 实现复杂动画路径
在实际开发中，常需将旋转与其他变换组合以实现更复杂的视觉效果。例如，先通过 translate 移动元素，再围绕新位置旋转，或者围绕非中心点旋转后保持位置不变。关键在于理解 transform-origin 仅影响变换的参考系，而不改变元素在文档流中的初始位置。通过合理组合这些属性，可以实现如钟摆、齿轮联动等逼真的动画效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
