html中如何旋转图片_HTML实现图片旋转动画效果【动画】

可通过CSS transform配合animation实现图片中心旋转：①用@keyframes定义0°→360°动画并设infinite循环；②用transform-origin调整旋转中心；③用transition实现hover/click触发动态旋转；④用CSS变量动态调控角度与速度；⑤结合JavaScript手势实现移动端拖拽旋转。

如果希望在网页中让图片围绕其中心点进行顺时针或逆时针旋转，可借助CSS的transform属性配合animation实现动态效果。以下是几种独立可行的HTML与CSS结合方案：

一、使用@keyframes定义旋转动画

通过声明关键帧动画，指定图片从0度旋转至360度的过程，并将其绑定到img元素上，实现持续循环旋转。

1、在

2、设置from状态为transform: rotate(0deg)，to状态为transform: rotate(360deg)。

立即学习“前端免费学习笔记（深入）”；

3、为img选择器添加animation属性，值设为rotate360 2s linear infinite。

4、确保img元素具有display: block样式，避免行内元素基线对齐导致视觉偏移。

二、利用transform-origin控制旋转中心点

默认情况下，transform的旋转中心为元素盒模型的中心（50% 50%），但可通过transform-origin显式设定原点位置，例如绕左上角或底部中点旋转。

1、为img元素添加style="transform-origin: top left;"以启用左上角为旋转支点。

2、配合animation使用transform: rotate(360deg)，此时旋转轨迹将围绕左上角展开。

3、若需绕图片右下角旋转，将transform-origin设为bottom right。

4、支持像素值设定，如transform-origin: 20px 30px，表示距左边缘20px、距上边缘30px的位置。

三、通过transition实现点击触发动态旋转

不依赖循环动画，而是利用CSS过渡属性，在用户交互（如hover或click）时平滑改变旋转角度，适合需要响应式控制的场景。

1、为img元素设置初始transform: rotate(0deg)及transition: transform 0.5s ease。

标签： css javascript java html