[分享]css3改变旋转中心d点

CSS3 是前端工程师日常工作中使用频率最高的技术之一，它可以轻松实现复杂的页面布局和交互效果。在很多情况下，我们需要对页面元素进行旋转操作，比如实现一个旋转木马或是一个立体的立方体效果等等。在这个过...

CSS3 是前端工程师日常工作中使用频率最高的技术之一，它可以轻松实现复杂的页面布局和交互效果。在很多情况下，我们需要对页面元素进行旋转操作，比如实现一个旋转木马或是一个立体的立方体效果等等。在这个过程中，CSS3 提供了很多实用的属性，其中 transform-origin 就是用来改变旋转中心点的属性。

/* 常规写法 */
.box {
  transform: rotate(30deg);
  transform-origin: 50% 50%;
}

/* 改变旋转中心点的位置 */
.box {
  transform: rotate(30deg);
  transform-origin: 20px 20px;
} 

在上面的代码中，我们使用 transform-origin 属性来改变旋转中心点的位置。默认情况下，旋转中心点是元素的中心点，即横纵坐标都是 50%。如果我们需要把旋转中心点移动到左上角，只需要将值改为具体的像素，比如以上代码中的 20px。这样，在元素进行旋转操作时，就会绕着左上角的点进行旋转，而不是中心点。

需要注意的是， transform-origin 属性也可以使用关键字或是百分比来定义旋转中心点的位置。以下是常用的几个值：

• top
• bottom
• left
• right
• center

如果需要同时改变 X 和 Y 轴的值，可以这样写：

.box {
  transform: rotate(30deg);
  transform-origin: 20px 30px;
} 

最后再提一点，如果想让元素固定在旋转中心点不动，可以将元素的位置设置为 absolute 或 fixed，并将 left 和 top 属性设置为旋转中心点的位置。