css transform-rotate结合transition如何实现旋转

P粉602998670 2025-10-13 00:00:00 次阅读

使用 transform: rotate() 和 transition 可实现平滑旋转动画。1. 设置 transition 控制旋转时长与缓动；2. 在 :hover 状态下改变 rotate 值触发动画；3. 可通过 transform-origin 调整旋转中心；4. 持续旋转建议用 @keyframes 配合 animation。

使用 CSS 的 transform: rotate() 结合 transition 可以轻松实现平滑的旋转动画。关键在于设置过渡属性，让旋转变化不是瞬间完成，而是有时间地渐变。

基本语法与结构

要实现旋转动画，需要两个核心 CSS 属性：

transform: rotate(角度)：定义元素旋转的角度，单位是 deg（度）
transition：控制 transform 变化的过程时长和缓动方式

通常在鼠标悬停（:hover）或其他状态变化时触发旋转。

实现步骤

以下是一个常见用法示例——鼠标移上时顺时针旋转90度：

.rotate-element {
  transition: transform 0.5s ease;
}

.rotate-element:hover {
  transform: rotate(90deg);
}

说明：

transition 应写在默认状态（常态）上，表示“所有 transform 的变化都用 0.5 秒的 ease 效果过渡”
rotate(90deg) 表示向右旋转90度，负值为逆时针，如 rotate(-45deg)
ease 是默认缓动函数，也可换成 linear、ease-in、ease-out 等

更复杂的旋转效果

如果希望元素自动循环旋转，可以用 @keyframes 配合 transition 实现持续动画：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-animation {
  animation: spin 2s linear infinite;
}

注意：这种属于 animation 而非 transition。transition 更适合用户交互触发的变化，比如点击或悬停。