基础知识：CSS的transform属性

CSS的transform属性是实现元素变换的核心。它允许开发者对HTML元素应用2D或3D转换，包括平移、缩放、倾斜和旋转。以下是transform属性的一些基本语法：

/* 旋转90度 */
.element {
  transform: rotate(90deg);
}

在这个例子中，.element 类的元素将被旋转90度。

实现图片90度旋转

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS图片旋转示例</title>
<style>
  .rotated-image {
    width: 200px;
    height: 200px;
    background-image: url('path/to/your/image.jpg');
    background-size: cover;
    transform: rotate(90deg);
    transition: transform 0.5s ease-in-out;
  }
</style>
</head>
<body>
<div class="rotated-image"></div>
</body>
</html>

控制旋转中心点

默认情况下，transform属性的旋转中心点是元素的中心。但有时候，我们可能需要改变这个中心点。这可以通过transform-origin属性来实现：

.rotated-image {
  transform: rotate(90deg);
  transform-origin: 50% 50%; /* 默认中心点 */
  /* 如果需要，可以更改为特定的坐标值，例如： */
  /* transform-origin: 20px 20px; */
}

在上面的代码中，我们保留了默认的中心点（50% 50%），但如果你需要将旋转中心点移动到元素的其他位置，可以更改transform-origin属性的值。

动画效果

为了使旋转更加动态和有趣，我们可以使用CSS动画。以下是如何创建一个简单的旋转动画：

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotated-image {
  animation: rotateAnimation 2s linear infinite;
}

在这个例子中，.rotated-image 类的元素会不断旋转360度，动画持续时间为2秒，并且无限循环。

总结