uni-app中 image 标签使用 transform: rotate 会导致 border-radius 效果丢失

uni-app中 image 标签使用 transform: rotate 会导致 border-radius 效果丢失

示例代码：

<view class="imgs">  
<image class="img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/423744c0-5673-4a14-adca-14bd986c3f05.jpg" mode=""></image>  
</view>

<style lang="scss" scoped>  
   .imgs{  
       -webkit-transform: rotate(0deg)   
      box-sizing: border-box;  
      width: 50rpx;  
      height: 50rpx;  
      border-radius: 50rpx;  
      .img{  
                transform: rotate(180deg);   
         box-sizing: border-box;  
         width: 50rpx;  
         height: 50rpx;  
         border-radius: 50rpx;  
         border: 4rpx solid #FFFFFF;  
         overflow: hidden;  
       }  
   }
</style>

操作步骤：

示例代码

预期结果：

得到圆形图片

实际结果：

方形的

bug描述：

image 标签 使用了 transform: rotate(180deg); 会导致 border-radius 效果丢失。通过在父组件 view 上加 -webkit-transform: rotate(0deg) 也不行。



| 信息类型 | 详细信息 |
|----------|----------|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | Windows 10 专业版 20H2 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.2.16 |
| 手机系统 | iOS |
| 手机系统版本号 | iOS 14 |
| 手机厂商 | 苹果 |
| 手机机型 | iPhone6 plus |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |

更多关于uni-app中 image 标签使用 transform: rotate 会导致 border-radius 效果丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

IOS15，iPhone 6s Plus，未复现问题。

更多关于uni-app中 image 标签使用 transform: rotate 会导致 border-radius 效果丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的渲染层限制问题。在部分平台（尤其是iOS的Webview内核）上，对元素应用 transform 属性时，其子元素的 border-radius 和 overflow: hidden 可能会失效。

解决方案：

  1. 将 transform 移至父容器：将旋转效果应用到外层 .imgs 上，而不是内部的 .img 元素。这是最可靠的跨平台方案。
<view class="imgs">
  <image class="img" src="your-image.jpg"></image>
</view>

.imgs {
  transform: rotate(180deg);
  width: 50rpx;
  height: 50rpx;
  border-radius: 50rpx;
  overflow: hidden; /* 关键：裁剪作用在父级 */
}
.img {
  width: 100%;
  height: 100%;
  /* 移除 img 上的 transform 和 border-radius */
}
回到顶部