CSStransform-origin控制旋转中心详解

本篇文章给大家分享《CSS动画中transform-origin控制旋转中心》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

transform-origin 决定旋转中心，默认为元素中心；设置如 top left 可让元素绕左上角旋转，结合 animation 实现精准动画效果。

在使用 CSS 动画（animation）配合 transform 实现旋转效果时，transform-origin 属性起到关键作用——它决定了元素旋转的中心点。如果不正确设置旋转中心，动画可能看起来偏离预期，比如绕着页面某个角落转而不是自身中心。

transform-origin 基础语法

transform-origin 用于定义变换（如旋转、缩放、倾斜）的基准点。默认值是 50% 50%，也就是元素的中心。

常见取值方式：

• center center 或 50% 50%：中心（默认）
• top left：左上角
• right bottom：右下角
• 20% 80%：水平方向20%，垂直方向80%
• 10px 30px：距离左边10px，顶部30px

结合 animation 实现自定义旋转动画

假设你想让一个盒子绕其左上角旋转360度，可以这样写：

<div   style="max-width:100%">
.keyframe-example {
  width: 100px;
  height: 100px;
  background: #3498db;
  animation: rotateAround 2s linear infinite;
  transform-origin: top left; /* 关键：设置旋转中心 */
}
<p>@keyframes rotateAround {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}</p></div>

这里 transform-origin: top left 明确指定旋转围绕左上角进行。若不设置，元素会默认绕中心旋转。

动态改变旋转中心

有时需要在动画过程中或不同状态下切换旋转中心。例如悬停时绕底部旋转：

<div style="background:#f4f4f4; padding:10px; margin:10px 0; border-radius:4px;">
.hover-rotate {
  width: 80px;
  height: 80px;
  background: #e74c3c;
  transition: transform-origin 0.3s ease;
}
<p>.hover-rotate:hover {
transform-origin: bottom center;
animation: spin 1s linear infinite;
}</p><p>@keyframes spin {
to { transform: rotate(360deg); }
}</p></div>

注意：直接在 hover 上写 transform-origin 可以生效，但若想平滑过渡旋转中心位置，需配合 transition。不过浏览器对 transform-origin 的过渡支持有限，通常只在状态切换时立即生效。

3D 旋转中的 transform-origin 扩展

在 3D 动画中，transform-origin 还可指定 Z 轴偏移：

• transform-origin: center center 50px：Z轴向外偏移50px
• 常用于增强透视感，配合 perspective 和 rotateX/rotateY

基本上就这些。掌握 transform-origin 就能精准控制动画中元素的旋转行为，避免“乱转”现象。关键是根据设计意图设定合适的原点，再结合 keyframes 实现流畅动画。不复杂但容易忽略。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSStransform-origin控制旋转中心详解》文章吧，也可关注golang学习网公众号了解相关技术文章。