当我改变旋转时我的图像消失 CSS 属性

Question

代码：

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/Whosebug-icon.png">
</div>

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

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

Answer 1

您可以通过添加 class 来修复它。我为演示添加了 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>

Answer 2

试试这个，在 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>

当我改变旋转时我的图像消失 CSS 属性

My image disappears when I change the rotation CSS property

html

javascript

css

rotation