如何用CSS/JQuery的calc实现图片Hover旋转效果？附参考站点

CSS 实现方案 #

其实你之前用skew没成功是因为skew是倾斜变换，不是旋转哦～要实现旋转效果，咱们用transform: rotate()配合过渡动画就可以轻松搞定，完全不需要复杂的calc。

步骤很简单：

• 给图片（或者它的容器）设置初始状态，加上过渡动画让旋转更平滑
• 在鼠标悬停（:hover）时，给元素添加旋转的变换属性

示例代码：

<!-- HTML 结构 -->
<div class="publication-item">
  <img src="你的图片地址" alt="出版物封面" class="publication-img">
</div>

/* CSS 样式 */
.publication-img {
  /* 初始状态：设置过渡动画，让旋转过程更丝滑 */
  transition: transform 0.3s ease;
  /* 旋转中心默认是元素中心，你也可以改成比如"top right"之类的自定义位置 */
  transform-origin: center center;
}

.publication-img:hover {
  /* 悬停时顺时针旋转10度，角度可以根据需求调整 */
  transform: rotate(10deg);
}

如果想要那种左右错落的旋转效果（比如一半图片顺时针，一半逆时针），只要给不同图片加个额外类就行：

.publication-img.rotate-left:hover {
  transform: rotate(-8deg);
}

.publication-img.rotate-right:hover {
  transform: rotate(8deg);
}

要是你想要的是“旋转+轻微倾斜”的复合效果，也可以把两个变换结合起来：

.publication-img:hover {
  transform: rotate(10deg) skew(-2deg);
}

jQuery 实现方案 #

如果需要更灵活的控制（比如根据鼠标位置动态调整旋转角度、结合其他交互逻辑），用jQuery也能轻松实现：

示例代码：

<!-- HTML 结构和上面一致 -->
<div class="publication-item">
  <img src="你的图片地址" alt="出版物封面" class="publication-img">
</div>

// jQuery 代码
$(document).ready(function() {
  // 给所有目标图片绑定悬停事件
  $('.publication-img').hover(
    // 鼠标进入时的动作：顺时针旋转10度
    function() {
      $(this).stop().animate({ deg: 10 }, {
        duration: 300, // 动画时长300毫秒
        step: function(now) {
          // 每一步更新旋转角度
          $(this).css({ transform: 'rotate(' + now + 'deg)' });
        }
      });
    },
    // 鼠标离开时的动作：恢复到初始角度
    function() {
      $(this).stop().animate({ deg: 0 }, {
        duration: 300,
        step: function(now) {
          $(this).css({ transform: 'rotate(' + now + 'deg)' });
        }
      });
    }
  );
});

这里的stop()是为了防止快速多次悬停导致动画堆积卡顿，保证交互更流畅。

内容的提问来源于stack exchange，提问作者SKM