css旋转

作者：逐鹿↘星恒发布日期:2026-05-01 浏览:117

/* 使用 CSS 实现元素的旋转效果 */

/* 定义一个类，用于旋转元素 */
.rotate {
  /* 设置过渡效果，使旋转更加平滑 */
  transition: transform 0.5s ease;
}

/* 当鼠标悬停在元素上时，应用旋转效果 */
.rotate:hover {
  /* 使用 transform 属性中的 rotate() 函数来旋转元素 */
  transform: rotate(360deg);
}

解释说明：

transition: transform 0.5s ease;：这行代码定义了当元素的 transform 属性发生变化时，会有一个持续 0.5 秒的平滑过渡效果。
transform: rotate(360deg);：这行代码使用了 rotate() 函数，将元素顺时针旋转 360 度。当鼠标悬停在元素上时，元素会从原始位置旋转到 360 度的位置，形成一个完整的旋转动画。

你可以将这个 CSS 应用到任何 HTML 元素上，并通过添加 rotate 类来实现旋转效果。

上一篇：css定位

下一篇：css 渐变色