css旋转怎么控制它的中心点

作者：刎心封爱为伱锁情发布日期:2025-03-06 浏览:77

/* 通过 transform-origin 属性控制旋转的中心点 */
.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s;

  /* 设置旋转中心点为元素的左上角 */
  transform-origin: 0% 0%;
}

.element:hover {
  transform: rotate(360deg);
}

解释说明：

transform-origin 属性用于指定元素在进行变换（如旋转、缩放等）时的参考点，默认值是 50% 50%，即元素的中心点。
在上面的例子中，我们将 transform-origin 设置为 0% 0%，表示旋转的中心点是元素的左上角。
当鼠标悬停在 .element 上时，元素会绕着左上角旋转 360 度。

上一篇：text/css

下一篇：css鼠标变手