transform属性不能同时写scale和rotate，怎么办？？

最新推荐文章于 2024-09-09 23:53:04 发布

okfine17

最新推荐文章于 2024-09-09 23:53:04 发布

阅读量8.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web前端 css

本文链接：https://blog.youkuaiyun.com/yCharlee/article/details/78115263

Web前端同时被 2 个专栏收录

8 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文介绍了一种在不冲突的情况下使图片同时实现旋转和放大功能的方法。通过使用双层div结构，外层用于处理图片的缩放效果，内层则负责图片的旋转展示。文章提供了具体的HTML和CSS代码实例，并推荐了外层使用scale而内层使用rotate来避免显示效果异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

<div class="outScale">
     <div class="innerRotate">
          <img  src="" alt="暂无图片"/>
      </div>
</div>

当一个图片既要实现旋转需求，又要实现放大需求，但是transform属性不能同时写scale和rotate，这怎么办
解决方案是：
在图片外套两层div。
advice：外层的scale,里面的rotate不然显示效果有点weird

css部分：

.outScale{
    transition: transform 1.2s; 
    &:hover{
        transform: scale(1.5); 
    }
}
.innerRotate{
    &0{
        transform: rotate(0deg);
    }
    &90{
        transform: rotate(90deg);
    }
    &180{
        transform: rotate(180deg);
    }
    &270{
        transform: rotate(270deg);
    }
}