📌  相关文章
📜  在悬停 CSS 上旋转图像 - Html (1)

📅  最后修改于: 2023-12-03 14:51:26.929000             🧑  作者: Mango

在悬停 CSS 上旋转图像 - Html

在网页开发中，有时会希望在鼠标悬停在一个元素上时，调整该元素的样式，以提高用户交互性和可视性。本文将介绍如何在悬停 CSS 上旋转图像。

实现步骤

步骤如下：

1. 创建 HTML 元素

首先，我们需要在 HTML 中创建一个图片元素，例如：

<img src="example.jpg" alt="example image" id="rotate-img">

这会创建一个 ID 为“rotate-img”的图片元素。

2. 创建 CSS 样式

接下来，我们需要编写 CSS 样式来控制图片元素的旋转。以下是示例代码：

#rotate-img {
  transition: transform .2s;
}

#rotate-img:hover {
  transform: rotate(45deg);
}

这些 CSS 样式将在鼠标悬停在图片上时旋转图片 45 度。

3. 效果演示

你可以在浏览器中打开这个 HTML 页面进行测试：

<!DOCTYPE html>
<html>
  <head>
    <title>Rotate Image on Hover CSS</title>
    <style>
      #rotate-img {
        transition: transform .2s;
      }
      #rotate-img:hover {
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <img src="example.jpg" alt="example image" id="rotate-img">
  </body>
</html>
总结

使用简单的 HTML 和 CSS，我们可以在鼠标悬停在图片上时旋转它，并改进我们网页的用户交互性和可视性。