CSS如何设置锚点（支点）实现元素/图片绕左侧固定点旋转

完全可以仅靠CSS实现你需要的效果，不需要借助JavaScript，核心是使用CSS的transform-origin属性自定义旋转支点位置。

核心原理 #

CSS的变形效果默认以元素正中心为支点，你只需要把变形原点修改到元素左边缘的中点位置，旋转时就会以左侧为固定点，和时钟指针的转动逻辑完全一致。

实现代码 #

.target-element {
  /* 设置旋转支点：水平靠左、垂直居中，对应元素左边缘中点 */
  transform-origin: left center;
  /* 自定义旋转角度即可：正数为顺时针转，负数为逆时针转 */
  transform: rotate(45deg);
}

如果是你举例的水平线段，加上基础样式就能直接看到效果：

.line {
  width: 200px;
  height: 2px;
  background-color: #000;
  transform-origin: left center;
  /* 测试旋转：顺时针转60度，左端完全固定不动 */
  transform: rotate(60deg);
}

可调参数说明 #

• 如果需要调整支点的垂直位置，直接修改transform-origin的第二个值即可：比如要把支点放在左上角就写left top，放在左侧距离顶部10px的位置就写left 10px。
• 旋转角度支持任意数值，搭配CSS过渡transition属性还能实现平滑的指针转动动画效果。
• 该属性对所有块级元素、行内替换元素（比如img图片）都生效，主流浏览器全兼容，不需要额外适配。

内容的提问来源于stack exchange，提问作者jn_lance