[分享]css3已一个坐标为原点旋转

在CSS3中，我们可以使用transform属性来对元素进行旋转操作。其中，旋转的基准点默认是元素的中心点，但我们也可以通过设置元素的transformorigin属性来改变基准点的位置。.eleme...

在CSS3中，我们可以使用transform属性来对元素进行旋转操作。其中，旋转的基准点默认是元素的中心点，但我们也可以通过设置元素的transform-origin属性来改变基准点的位置。

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

上述代码表示旋转一个元素45度，并将以元素左上角为旋转基准点。对于transform-origin属性的设置，可采用如下三种方式：

• 设置为百分比值，如“transform-origin: 50% 50%;”，表示基准点位于元素中心处；

• 设置为长度值，如“transform-origin: 10px 20px;”，表示基准点位于距离元素左上角10像素、20像素的位置；

• 设置为关键字值，如“transform-origin: left top;”，表示基准点位于元素左上角的位置。

通过以上方式，我们可以轻松实现元素在不同基准点位置下的旋转效果，为页面添加更加生动的效果。