CSS 以中心为轴旋转图像

在本文中，我们将介绍如何使用CSS3旋转图像，并以中心为轴进行旋转。CSS3提供了一个transform属性，通过使用rotate函数可以轻松地对元素进行旋转。通过将旋转点移到元素的中心，我们可以实现以中心为轴的旋转效果。

阅读更多：CSS 教程

使用transform属性旋转图像

要使用CSS3旋转图像，需要使用transform属性。transform属性是一个通用的属性，可以用于在元素上应用各种转换效果，包括旋转。

下面是一个示例，在其中我们将一个图像元素居中，并通过transform属性以45度的角度将其顺时针旋转：

.rotate-image {
  position: absolute; /* 确保图像在容器中居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

在上面的代码中，我们使用position属性将图像元素绝对定位，并将top和left属性设置为50%，以将元素的中心放置在父容器的中心。

然后，我们使用transform属性的translate函数将元素向左上方移动，使其中心与父容器的中心对齐。translate函数以百分比为单位，并使用负值将元素向上和向左移动。例如，translate(-50%, -50%)表示将元素向左和向上移动其自身宽度和高度的50%。

最后，我们使用rotate函数将图像以45度的角度顺时针旋转。

调整旋转点

默认情况下，transform的旋转点位于元素的左上角。为了以中心为轴旋转图像，我们需要将旋转点移动到元素的中心。可以通过使用transform-origin属性来实现。

下面是一个示例，在其中我们将图像元素的旋转点移动到其中心：

.rotate-image {
  position: absolute; /* 确保图像在容器中居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center center; /* 将旋转点设置为中心 */
}

在上面的代码中，我们添加了transform-origin属性，并将其值设置为center center，这将元素的旋转点移动到其中心。

使用hover伪类实现交互效果

除了静态的旋转效果，我们还可以使用CSS中的hover伪类来实现交互式的旋转效果。例如，我们可以在鼠标悬停在图像上时将其旋转45度。

下面是一个示例，在其中我们使用hover伪类来实现图像的交互旋转效果：

.rotate-image {
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.rotate-image:hover {
  transform: translate(-50%, -50%) rotate(45deg);
}

在上面的代码中，我们使用transition属性添加了一个过渡效果，当transform属性发生变化时，将使过渡平滑进行。

然后，我们使用hover伪类选择器来为悬停状态下的图像元素定义新的transform属性值，将其旋转45度。

总结

通过使用CSS3的transform属性，我们可以轻松地实现图像的旋转效果。通过将旋转点移动到元素的中心，我们可以实现以中心为轴的旋转。此外，我们还可以通过添加过渡效果和使用hover伪类来实现交互式的旋转效果。希望本文对您学习CSS3旋转图像有所帮助！