Search code examples
javascripthtmlcssimageimage-rotation

Rotated image within span not appearing

I am currently working on a game in which I have an inventory system, with 5 slots. I am trying to make images of the items in the bag appear. Each item is horizontal, so I am trying to use CSS to rotate the image so that it appears diagonally (just like how items appear in Minecraft inventories). However, for some reason, when I try to do this, the image does not appear. Why? Whenever I check the elements in the console, the source of the image shows up as it should, but the actual image cannot be found. Here is my code:

<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, ""); }

            }

        }

This is what I see:

bag

This is the actual element state:

console

Solution

  • I got a fix! By creating an intermediate tag, and applying a CSS ruleset for all images inside that span tag, I was able to apply the rotation. Here is the updated HTML and 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;

}