昨晚凌晨两点，我盯着屏幕上的那个按钮，心里骂了一万遍。

客户非要那个Logo转起来，还要丝滑，还要带点那种“高级感”的缓动。我说用GIF图吧，简单。他说不行，要响应式，要高清，要代码实现。我差点把键盘砸了。

真的，做前端这行，有时候觉得自己在跟空气搏斗。但话说回来，这种需求虽然烦人，解决起来其实也就那么回事。今天我不讲那些虚头巴脑的理论，就讲讲怎么用最少的代码，搞定这个让人头秃的旋转效果。

很多人一听到“代码”，脑子里就是密密麻麻的英文字母。其实，对于图片旋转，CSS3早就把路铺好了。你不需要去翻那些厚得像砖头一样的手册，只需要记住一个属性：transform。

我手头有个项目，是个电商首页，那个促销标签一直在那儿转，转得用户心烦意乱。我接手的时候，第一反应是：这谁写的？怎么还加了JS定时器去改角度？简直是浪费性能。

直接用CSS动画啊。

代码很简单，核心就这几行。别怕，我拆解给你看。

第一步，定义动画。

@keyframes spin {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

这就够了。从0度转到360度，形成一个闭环。别搞那些复杂的贝塞尔曲线，除非你有特殊需求，否则线性或者 ease-in-out 就足够应付90%的场景。

第二步，应用到元素上。

img.spinner {

animation: spin 2s linear infinite;

}

这里有个坑，很多人喜欢用 transition。记住，transition 是过渡，不是动画。你要让它一直转，必须用 animation。而且，那个 infinite 关键字不能少，不然转一圈就停了，客户会骂你半成品。

我在实际项目中，经常遇到图片旋转后模糊的问题。这是因为浏览器渲染机制导致的亚像素问题。解决办法很简单，给容器加个父级，或者给图片加个微小的位移修正。

比如：

transform-origin: center;

一定要指定旋转中心。默认是中心，但有时候会被父元素的布局带偏。特别是当你用了 flex 或者 grid 布局的时候，那个中心点可能会跑偏到左上角，转起来像个陀螺一样乱晃，丑得要死。

还有一个细节，就是性能。

有些新手喜欢用 left 和 top 属性去模拟旋转，或者用 JS 频繁操作 DOM。千万别这么干。GPU 加速只认 transform 和 opacity。你动别的属性，浏览器就得重排（reflow），那是真的卡。

我有一次测试，一个列表里有50个图片同时旋转。用 JS 算角度，CPU占用率直接飙到30%。换成 CSS animation，稳如老狗，手机发烫都感觉不到。

当然，兼容性也是个问题。

虽然现在主流浏览器都支持 CSS3，但如果你还要照顾那些老旧的 IE 浏览器，那就得加前缀。-webkit-transform, -moz-transform 等等。不过说实话，2024年了，还有多少人用 IE？除非是那种国企的老旧内网系统，否则我一般直接忽略。为了那1%的用户，写一堆垃圾代码，不值得。

如果你想要更复杂的效果，比如hover时旋转，那就更简单了。

img:hover {

transform: rotate(180deg);

transition: transform 0.5s ease;

}

这里用 transition 是因为它是一次性的动作，从静止到旋转，不需要无限循环。

我见过最离谱的需求，是要图片在旋转的同时放大缩小。这也不难，组合一下属性就行。

transform: rotate(360deg) scale(1.2);

注意顺序。先旋转还是先缩放，效果是不一样的。通常建议先旋转，再缩放，这样视觉重心更稳。

最后，别忘了 accessibility。

虽然图片在转，但如果是信息性图片，记得加 aria-hidden="true"，或者确保屏幕阅读器能读到替代文本。别为了炫技，把盲人用户给得罪了。

写代码就是这样，看似简单，细节全是坑。但当你看到那个 Logo 在屏幕上完美地旋转，丝滑得像德芙一样，那种成就感，真的比喝十杯咖啡还提神。

别再去搜什么“网页设计图片旋转代码”找那些过时的教程了。掌握原理，自己动手试一次，比看一百篇文章都管用。

记住，代码是写给机器看的，但体验是给人用的。别为了代码简洁而牺牲体验，也别为了炫技而堆砌代码。找到那个平衡点，你就赢了。

今晚早点睡，明天还得改需求呢。