修改CSS rotation属性时图片消失，打开Chrome开发者工具后恢复显示

嘿，我之前也踩过类似的浏览器渲染坑！你遇到的问题大概率是初始渲染时嵌套transform导致的合成层异常——浏览器第一次渲染时没正确处理父元素的transform，导致图片被“隐藏”，而打开开发者工具会触发页面重绘/重排，浏览器重新计算渲染逻辑，图片就又出来了。咱们一步步来解决：

先梳理代码里的几个小问题 #

1. HTML结构顺序错误：你的CSS和JS放在了div元素之后，浏览器解析到图片时还没加载样式，容易导致初始渲染混乱；
2. transform应用层级冲突：你给父容器#my_img加了transform，但子元素img本身也有默认transform，浏览器初始渲染时没正确处理这种嵌套关系。

具体解决方案 #

方案一：直接给img元素应用transform（最推荐） #

既然目标是让图片移动旋转，直接操作img元素就好了，避免父容器transform带来的渲染问题：

修改你的JS代码：

// 直接获取内部的img元素
var img = document.getElementById("my_img").querySelector("img");
window.onload = function(){ 
  img.style.transform = "translateX(100px) rotate(50deg)"; 
}

方案二：强制浏览器正确处理父容器的合成层 #

如果一定要给父容器加transform，可以添加两个CSS属性，触发GPU加速，让浏览器把父容器放到独立的合成层，避免初始渲染异常：

修改你的CSS代码：

#my_img {
  /* 添加这两个属性强制正确渲染 */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
#my_img img{ 
  transform: translateX(0px) rotate(0deg); 
}

方案三：修复HTML结构顺序 #

把CSS放到<head>里，JS放到</body>闭合前，确保浏览器先加载样式再渲染元素：

<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="my_img">
    <img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Stackoverflow-icon.png">
  </div>
  <script src="script.js"></script>
</body>
</html>

总结 #

最推荐方案一，直接操作目标元素，从根源上避免了嵌套transform带来的渲染bug，代码也更直观。

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