如何为同一元素应用两个transform属性及实现图片Hover缩放效果？

1. 能否为同一元素应用两个transform属性？ #

可以，但不能分开声明两个transform属性（后声明的会覆盖前一个），正确方式是在同一个transform中用空格分隔多个变换函数，示例：

.element {
  transform: scale(1.1) rotate(10deg);
}

2. 解决悬停图片缩放的问题 #

你的SCSS代码失效是因为选择器逻辑错误：&__img:hover &__img:not(:hover)编译后是.gallery__img:hover .gallery__img:not(:hover)，它只会匹配被hover的img内部的子级img，但你的HTML中所有img是同级关系，并非嵌套，所以无法选中目标元素。

方案1：使用:has()选择器（现代浏览器推荐） #

利用:has()检测容器内是否有被hover的子元素，统一控制所有图片的缩放，再单独覆盖被hover图片的样式：

.gallery {
  &__img {
    transition: transform 0.3s ease; // 添加过渡动画提升交互体验
  }

  // 容器内存在被hover的item时，所有图片缩小
  &:has(&__item:hover) &__img {
    transform: scale(0.9);
  }

  // 被hover的item中的图片放大，覆盖缩小样式
  &__item:hover &__img {
    transform: scale(1.1);
  }
}

方案2：兼容旧浏览器（不依赖:has()） #

通过兄弟选择器控制前后同级元素，需配合容器的弹性/网格布局：

.gallery {
  display: flex; // 或grid，根据布局需求调整
  gap: 1rem; // 可选，增加图片间距

  &__img {
    transition: transform 0.3s ease;
  }

  // 被hover的item之后的所有兄弟item内的图片缩小
  &__item:hover ~ &__item &__img {
    transform: scale(0.9);
  }

  // 前面存在被hover兄弟的item内的图片缩小
  &__item:has(~ &__item:hover) &__img {
    transform: scale(0.9);
  }

  // 被hover的item内的图片放大
  &__item:hover &__img {
    transform: scale(1.1);
  }
}

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