移动端图片旋转失效求助：同class下多种尝试均无效

针对你的情况，试试下面这几种方案：

• 提升样式优先级，直接给目标元素加旋转
  修改媒体查询，用组合选择器确保样式能覆盖其他规则：

  @media (max-width: 599px) {
    .wrapper {
      flex-direction: column;
    }
    /* 仅针对移动端显示的imagem类图片生效 */
    .imagem.d-sm-none {
      transform: rotate(6.5deg);
      /* 可选：自定义旋转原点，默认是元素中心 */
      transform-origin: center center;
    }
  }
  

• 针对v-img内部的实际图片元素设置
  Vuetify的v-img组件会生成内部<img>标签，有时候直接给v-img加样式不生效，需要选中内部图片：

  @media (max-width: 599px) {
    .wrapper {
      flex-direction: column;
    }
    .imagem.d-sm-none img {
      transform: rotate(6.5deg);
    }
  }
  

• 排查内联样式的问题
  你之前尝试在v-img的style里加旋转没生效，是因为内联样式必须写完整的transform: rotate(6.5deg);，但更推荐用外部CSS媒体查询，避免内联样式混乱。

• 移除无用的v-if逻辑
  已经通过d-sm-none实现了移动端显示、桌面隐藏，v-if完全没必要，直接删掉即可。

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