[分享]css中2D变形旋转的元素原点

CSS中的2D变形可以通过transform属性来实现，其中最常见的就是旋转。但是在旋转元素时，旋转中心点的位置会直接影响到元素的变形效果。在默认情况下，旋转中心点在元素的中心位置。比如，下面这个元素...

CSS中的2D变形可以通过transform属性来实现，其中最常见的就是旋转。但是在旋转元素时，旋转中心点的位置会直接影响到元素的变形效果。

在默认情况下，旋转中心点在元素的中心位置。比如，下面这个元素会以中心位置为中心点，顺时针旋转45度：

.element {
  transform: rotate(45deg);
} 

但是如果我们想要改变旋转中心点的位置呢？这时就需要用到transform-origin属性了。

transform-origin属性用来定义变形的原点位置。它默认的值是50% 50%，也就是元素的中心位置。如果想要改变原点的位置，可以按照以下的方式设置：

.element {
  transform-origin: 0 0; /* 将元素左上角作为原点 */
} 

这样，我们就把元素的左上角作为了原点，旋转时会以该点为中心点旋转。

除了用像素值或百分比来设置原点位置外，还可以使用关键字来表示：

• top
• left
• right
• bottom
• center

比如，我们可以将元素的右下角作为原点：

.element {
  transform-origin: right bottom;
} 

这些关键字可以任意组合使用，比如原点可以设置为右边缘的中心位置：

.element {
  transform-origin: right center;
} 

需要注意的是，transform-origin属性只影响旋转、缩放、倾斜等变形效果，对于平移效果不会产生影响。此外，它只对使用transform属性进行变形的元素有效。