css3 rotate旋转中心

在CSS3中，rotate（旋转）可以通过transform属性进行实现，可以对元素进行围绕其中心点的旋转。

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

默认情况下，元素旋转的中心点在其左上角。可以通过transform-origin属性来指定旋转中心的位置。

.rotate {
  transform-origin: 50% 50%; /*元素正中心*/
}

上述代码指定了旋转中心在元素正中心。transform-origin属性的值为一个或两个关键字（如top,left,right,bottom）或百分比值。

如果我们想让元素绕自己的中心点而不是绕页面的中心点旋转，可以通过指定transform-origin中x、y坐标为50%来实现。

.rotate {
  transform-origin: 50% 50%; /* 在元素自己的中心旋转 */
  transform: rotate(45deg);
}

如果我们需要设置旋转中心点在元素的右上角，则可以设置transform-origin的值为右上角的坐标。

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

如果我们需要设置旋转中心点在元素的底部中央，则可以设置transform-origin的值为底部中央的坐标。

.rotate {
  transform-origin: 50% 100%;
  transform: rotate(45deg);
}

总的来说，通过设置transform-origin属性，我们可以控制元素的旋转中心点，使得它能够更好地适应各种需求。