[分享]css3怎么设置旋转中心点

CSS3的旋转功能可以实现各种有趣的效果，但是默认的旋转中心点可能与我们期望的不一样。那么，如何设置旋转中心点呢？transformorigin: xaxis yaxis zaxis; 使用trans...

CSS3的旋转功能可以实现各种有趣的效果，但是默认的旋转中心点可能与我们期望的不一样。那么，如何设置旋转中心点呢？

transform-origin: x-axis y-axis z-axis; 

使用transform-origin属性可以设置旋转中心点，其中x、y、z坐标轴的值可以是百分比、像素值或关键字。如果只设置了x和y的值，z的默认值为0。

例如，以下代码可以将一个矩形围绕左上角旋转：

div {
  width: 100px;
  height: 50px;
  background-color: #f00;
  transform-origin: 0% 0%;
  transform: rotate(30deg);
} 

如果将transform-origin设置为50% 50%，则矩形将围绕中心点旋转：

div {
  width: 100px;
  height: 50px;
  background-color: #f00;
  transform-origin: 50% 50%;
  transform: rotate(30deg);
} 

如果需要在3D空间中进行旋转，则可以设置z的值。例如，以下代码可以将一个立方体围绕X轴和Y轴旋转：

div {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform-origin: 50% 50% -50px;
  transform-style: preserve-3d;
  animation: rotate 3s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
} 

在以上代码中，transform-origin设置为50% 50% -50px，表示旋转中心点在立方体的中心，并且z轴的值为-50px，即在立方体的内部。同时，使用transform-style: preserve-3d可以开启3D空间。

通过设置transform-origin，我们可以灵活地实现各种有趣的旋转效果。