css3 旋转

作者：轻狂书生发布日期:2026-06-28 浏览:51

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

/* 定义一个类 .rotate，用于旋转元素 */
.rotate {
  /* 设置初始旋转角度为0度 */
  transform: rotate(0deg);
  /* 过渡效果，使旋转更加平滑，持续时间为1秒 */
  transition: transform 1s;
}

/* 当鼠标悬停在元素上时，旋转45度 */
.rotate:hover {
  transform: rotate(45deg);
}

解释说明：

transform: rotate(0deg);：设置元素的初始旋转角度为0度。
transition: transform 1s;：定义过渡效果，使旋转变化在1秒内平滑完成。
.rotate:hover：当鼠标悬停在带有 .rotate 类的元素上时，元素会顺时针旋转45度。

你可以将这个CSS代码应用到HTML中的任何元素上，例如图片、按钮或文本框等，当用户将鼠标悬停在这些元素上时，它们将会旋转。

上一篇：css 行距

下一篇：css文字超过两行显示省略号