当我更改旋转 CSS 属性时，我的图像消失了答案

【问题标题】：My image disappears when I change the rotation CSS property当我更改旋转 CSS 属性时，我的图像消失了
【发布时间】：2020-09-05 17:43:21
【问题描述】：

代码：

var img = document.getElementById("my_img")

window.onload = function(){
    img.style.transform = "translateX(100px) rotate(50deg)";
}

#my_img img{
    transform: translateX(0px) rotate(0deg);
}

<html>
<div id="my_img">
  <img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Stackoverflow-icon.png">
</div>

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</html>

图像消失了，但是当我进入 Chrome 代码编辑器 (Ctrl+Shift+I) 时，图像出现了。

【问题讨论】：

PS：我发现当我调整窗口大小时，图像也会出现。这是我的 chrome 浏览器的问题吗？

标签： javascript html css rotation

【解决方案1】：

试试这个，在 Chrome 版本 81.0.4044.138 中工作

const img = document.getElementById("my_img")
	const input = document.getElementById("rotate")
	const btn = document.getElementById("btn")

	btn.addEventListener('click', () => {
		rotate(input.value);
	})

	function rotate(x) {
		img.style.transform = `translateX(100px) rotate(${x}deg)`
	}

img {
    	transform: translateX(0px) rotate(0deg);
	}

<img id="my_img" width=100 height=100 src="https://i.pinimg.com/originals/19/43/18/19431859261e12c5ba63da8f57b776ee.jpg">
<div style="margin-top: 50px">
	<input type="number" name="rotate" id="rotate" value="100">
	<button id="btn">Rotate</button>
</div>

【讨论】：

【解决方案2】：

您可以通过添加类来修复它。我添加了 setTimeout 进行演示。

var img = document.getElementById("my_img")

window.onload = function(){
    setTimeout(() => {
      img.classList.add("change")
    },1000);
}

img{
    transform: translateX(0px) rotate(0deg);
}

.change {
  transform: translateX(100px) rotate(50deg);
}

<div>
<img id="my_img" width=100 height=100 src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
</div>

【讨论】：

但我正在编写一些代码，因此我需要使用 javascript 更改旋转，我将传递一些变量作为角度。我能做什么？