CSS过渡如何实现图片旋转动画_transform rotate与transition配合-css教程-PHP中文网

CSS过渡如何实现图片旋转动画_transform rotate与transition配合

P粉602998670

发布： 2025-11-29 05:01:32

原创

575人浏览过

使用CSS transform: rotate()与transition可实现图片平滑旋转。1. HTML中添加图片并设类名；2. CSS设置transition控制旋转时长与缓动，hover时应用rotate()改变角度；3. 可通过transform-origin自定义旋转中心；4. 需持续旋转时可用@keyframes配合animation实现自动无限转动，适用于加载动画等场景。

css过渡如何实现图片旋转动画_transform rotate与transition配合

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

1. 基础结构：准备图片元素

先在 HTML 中插入一张图片，并为其添加一个类名，方便后续用 CSS 控制。

<img src="example.jpg" class="rotate-img" alt="旋转图片">

登录后复制

2. 设置 transform rotate 与 transition

CSS 中通过 transform: rotate() 定义旋转角度，用 transition 控制变化的持续时间和缓动效果。

例如，鼠标悬停时让图片顺时针旋转90度：

Supermoon

The AI-Powered Inbox for Growing Teams

126

查看详情

.rotate-img {
  transition: transform 0.6s ease;
}

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

登录后复制

说明：

transition: transform 0.6s ease 表示所有 transform 变化都用 0.6 秒完成，使用 ease 缓动函数
rotate(90deg) 是旋转90度，可改为 180deg、360deg 等
旋转以元素中心为原点，默认是 transform-origin: 50% 50%，也可自定义

3. 自定义旋转中心点（可选）

如果希望图片绕左上角旋转，可以修改 transform-origin：

.rotate-img {
  transition: transform 0.6s ease;
  transform-origin: top left;
}

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

登录后复制

4. 实现持续旋转动画（进阶）

若想让图片自动无限旋转，可用 @keyframes 配合 animation，但若坚持用 transition，可通过 JS 切换 class 触发。纯 CSS 自动转方案：

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

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

登录后复制

这适合加载图标等场景。

基本上就这些。用 transition + transform: rotate() 实现交互式旋转简单高效，适合 hover 效果。掌握 transition 的时间和缓动设置，能让动画更自然。

以上就是CSS过渡如何实现图片旋转动画_transform rotate与transition配合的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css相邻兄弟选择器是什么 css中flex-basis属性是什么 css中flex-basis的使用 css中flex-direction属性是什么 css中盒模型的注意点