跨度内的旋转图像未出现

Question

我目前正在开发一款有库存系统的游戏，其中有 5 个插槽。我正在尝试使包中物品的图像出现。每个项目都是水平的，所以我尝试使用 CSS 来旋转图像，使其呈对角线显示（就像项目在 Minecraft 库存中的显示方式一样）。但是，由于某种原因，当我尝试这样做时，图像没有出现。为什么？每当我检查控制台中的元素时，图像的来源都会正常显示，但找不到实际图像。这是我的代码：

<div id = "menu"
                     class = "game_element menu"
                     style = "display: none;" > 
                
                        <span class = "hoverable game_element slot"
                             id = "slot_1"
                             onclick = event_handler.switch_weapon(player.bag.slot_1)>

                                <img id = "slot_1_img"
                                     class = "item_slot"> </span>

                        <span class = "hoverable game_element slot"
                             id = "slot_2"
                             onclick = event_handler.switch_weapon(player.bag.slot_2)>

                             <img id = "slot_2_img"
                                  class = "item_slot"> </span>

                        <span class = "hoverable game_element slot"
                             id = "slot_3"
                             onclick = event_handler.switch_weapon(player.bag.slot_3)>

                             <img id = "slot_3_img"
                                  class = "item_slot"> </span>

                        <span class = "hoverable game_element slot"
                             id = "slot_4"
                             onclick = event_handler.switch_weapon(player.bag.slot_4)>

                             <img id = "slot_4_img"
                                  class = "item_slot"> </span>

                        <span class = "hoverable game_element slot"
                             id = "slot_5"
                             onclick = event_handler.switch_weapon(player.bag.slot_5)>
                             
                             <img id = "slot_5_img"
                                  class = "item_slot"> </span>
                        
                </div>

.slot {

    background-color: rgb(202, 202, 202);
    border-radius: 20px;

    border-color: rgb(255, 255, 255);

    color: rgb(54, 54, 54);
    width: 103px;
    height: 103px;
    padding: 20px;
    margin: 25px;
    float: left;
    position: relative;
    top: 28%;
    text-align: center;
    line-height: 110px;
    transition: all .1s ease-in-out;

    z-index: 5;

}

.item_slot {

    transform : rotate(-45deg);
    z-index: 6;

}

for (let x in player.bag) {

            if (document.getElementById(x.toString()) !== null) {

                try {

                    document.getElementById((x.toString() + "_img").toString()).innerHTML = "<img src = " + player.bag[x].image.src + ">";
                
                }
    
                catch { document.getElementById(x.toString()).innerHTML = x.replace(/^slot_+/i, ""); }

            }

        }

这是我看到的：

这是实际的元素状态：

Answer 1

我得到了修复！通过创建一个中间标签，并为该 span 标签内的所有图像应用 CSS 规则集，我能够应用旋转。这是更新后的 HTML 和 CSS:

<div id = "menu"
                     class = "game_element menu"
                     style = "display: none;" > 
                
                        <span class = "hoverable game_element slot"
                             id = "slot_1"
                             onclick = event_handler.switch_weapon(player.bag.slot_1)>

                                <span id = "slot_1_img"
                                     class = "item_slot"> </span> </span>

                        <span class = "hoverable game_element slot"
                             id = "slot_2"
                             onclick = event_handler.switch_weapon(player.bag.slot_2)>

                             <span id = "slot_2_img"
                                  class = "item_slot"> </span> </span>

                        <span class = "hoverable game_element slot"
                             id = "slot_3"
                             onclick = event_handler.switch_weapon(player.bag.slot_3)>

                             <span id = "slot_3_img"
                                  class = "item_slot"> </span> </span>

                        <span class = "hoverable game_element slot"
                             id = "slot_4"
                             onclick = event_handler.switch_weapon(player.bag.slot_4)>

                             <span id = "slot_4_img"
                                  class = "item_slot"> </span> </span>

                        <span class = "hoverable game_element slot"
                             id = "slot_5"
                             onclick = event_handler.switch_weapon(player.bag.slot_5)>

                             <span id = "slot_5_img"
                                  class = "item_slot"> </span> </span>
                        
                </div>

.item_slot > img{

    transform : rotate(-45deg);
    z-index: 6;

}

Answer 2

在另一个标签中添加 <img> 标签是错误的，因为：

<img> 是一个空元素意味着它没有有结束标签并且它不能有内容。

所以在你的html中</img>会被浏览器忽略例如，这个 html

<img id="1">
    <img id="2">
</img>

还有这个

<img id="1">
<img id="2">

都是一样的，所以不要那样做！

而是使用<div>或<span>作为容器，然后将<img>放入其中。

跨度内的旋转图像未出现

Rotated image within span not appearing

html

javascript

css

image

image-rotation