css中怎样改变旋转基点

CSS中怎样改变旋转基点
在CSS中，使用transform属性来进行旋转操作是非常常见的事情。如果我们只是简单地使用transform，它会默认以元素的中心点为旋转中心，但是有时候我们需要更精细地控制旋转的基点。
我们可以使用transform-origin属性来改变旋转基点。这个属性有两个参数，第一个参数是横向距离，可以设置为像素数值，也可以使用关键字来表示，比如center表示元素的中心点，left表示元素的左侧，right表示元素的右侧；第二个参数是纵向距离，也可以使用相同的关键字来表示。
下面是一个示例代码，通过改变transform-origin，我们可以改变正方形旋转的基点。

.square {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
  transform-origin: 20px 20px;
}

.square2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: rotate(45deg);
  transform-origin: center;
}

.square3 {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotate(45deg);
  transform-origin: right bottom;
} 

我们可以看到，三个正方形都被旋转了45度，但是旋转的基点不同，因此它们的旋转效果也不同。第一个正方形以左上角为基点，旋转后呈现一个倾斜的矩形；第二个正方形以中心点为基点，旋转后呈现一个菱形；第三个正方形以右下角为基点，旋转后呈现一个梯形。通过改变transform-origin，我们可以得到更多有趣的效果。