旋转图像 CSS

在CSS中通过一些属性来实现旋转图像，无需使用JavaScript或其他编程语言。这样可以提高网页性能，减少代码量。

transform CSS属性

transform CSS属性可以在元素旋转，缩放，倾斜或平移。它有很多函数，其中包括 rotate 函数用于旋转元素。该函数可以接受一个角度参数值，可以是正数（顺时针方向旋转）或负数（逆时针方向旋转）。以下是旋转图像的代码片段：

/* 图像顺时针旋转45度 */
.rotate-image {
  transform: rotate(45deg);
}

旋转中心点

默认情况下，旋转是以元素的中心点为中心进行的。但是，我们可以通过使用 transform-origin 属性来改变旋转的中心点。例如，我们可能想要图像围绕其左上角旋转。以下是使用 transform-origin 实现的代码片段：

/* 图像以左上角为中心点顺时针旋转45度 */
.rotate-image {
  transform: rotate(45deg);
  transform-origin: top left;
}

反向旋转

我们可以使用 transform: rotate(-45deg); 使图像逆时针旋转。但是，我们还可以直接使用CSS的 transform(rotateY(180deg)); 函数来实现镜像效果。以下是水平翻转的代码片段：

/* 图像水平翻转 */
.flip-horizontal-image {
  transform: rotateY(180deg);
}

同样的方式我们还可以通过使用 rotateX() 函数来实现垂直翻转。代码如下：

/* 图像垂直翻转 */
.flip-vertical-image {
  transform: rotateX(180deg);
}

动画旋转

我们可以结合CSS的动画（@keyframes）和 transform: rotate() 来创建动态旋转效果。以下是实现旋转动画的代码片段：

/* 图像动画旋转 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate-animation-image {
  animation: rotate 2s linear infinite;
}

上述代码创建了一个名称为 rotate 的动画，该动画在 rotate-animation-image 元素上应用，持续时间为 2 秒，并在完成时候重新开始。通过设置 linear 作为 animation-timing-function 的参数值，我们使其以恒定的速度进行旋转。

综合应用：按钮旋转效果

我们可以将上述技术应用到创建鼠标悬停时，旋转带有“回到顶部”文字的按钮。以下是这个效果的完整代码片段：

<div class="top-btn-container">
  <button class="top-btn">回到顶部</button>
</div>

.top-btn-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999; /* 使它总是在最上面 */
}

.top-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  position: relative;
}

/* 悬浮按钮时候旋转 */
.top-btn:hover {
  animation: spin 1s ease-in-out forwards;
  transform-origin: center;
}

/* 悬浮按钮时候变换颜色 */
.top-btn:hover {
  background-color: #3e8e41;
}

/* 按钮垂直居中 */
.top-btn-container:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.top-btn:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: '';
}

/* 悬浮按钮旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

参考资料

• [transform CSS 标准](https://www.w3.org/TR/css-transforms-1/