SCSS实现：鼠标悬停时旋转<figure>但不旋转其子元素<img>

嘿，这个需求用纯SCSS就能完美搞定，我给你一步步拆解实现思路和代码：

核心思路拆解 #

• 背景边框效果：利用<figure>的内边距（padding）或者背景区域营造“边框”感——让<figure>的背景尺寸略大于内部的<img>，露出的背景部分就相当于边框。
• 旋转抵消技巧：当<figure>悬停旋转时，给内部的<img>应用反向同角度旋转，抵消父元素的旋转继承，让图片保持静止状态。

完整代码实现 #

HTML基础结构 #

<figure class="rotating-figure">
  <img src="你的图片地址.jpg" alt="示例图片">
</figure>

SCSS样式代码 #

.rotating-figure {
  /* 基础布局：让figure成为块级容器，居中图片 */
  display: inline-block;
  margin: 2rem;
  /* 关键：设置内边距，让背景露出形成边框效果 */
  padding: 10px;
  background: #2c3e50; /* 边框颜色，可根据需求自定义 */
  border-radius: 4px; /* 可选：给边框添加圆角 */
  transition: transform 0.3s ease; /* 旋转过渡动画，让效果更丝滑 */
  overflow: visible; /* 防止旋转时内容溢出容器 */

  img {
    display: block;
    width: 200px; /* 图片固定宽度，也可改用百分比适配 */
    height: auto;
    transition: transform 0.3s ease; /* 和父元素保持同时长的过渡动画 */
  }

  /* 悬停触发的旋转效果 */
  &:hover {
    transform: rotate(5deg); /* 父元素旋转角度，可自定义调整 */

    img {
      transform: rotate(-5deg); /* 反向旋转相同角度，抵消父元素的旋转影响 */
    }
  }
}

细节优化说明 #

• 边框效果的灵活调整：如果你不想用padding实现边框，也可以给<figure>设置background-size: 110% 110%;+background-position: center;，同时给<img>设置width: 100%;，这样背景会比图片大一圈，适合用渐变或图片作为“边框”的场景。
• 过渡动画：给父元素和图片都添加transition属性，能让旋转过程更流畅，避免生硬的跳变。
• 旋转角度：你可以根据需求自由调整rotate的度数，只要父元素和图片的旋转角度绝对值相同、方向相反，就能实现图片静止的效果。

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