Search code examples
htmlcssrotationpositionabsolute

CSS position absolute stops the rotate property


I'm new to html/css/php, so it may be a dumb question, but I've searched the documentation of position: absolute and transform: rotate and I don't see any hint of why the "absoluteness" turns off rotation.

I'm trying to do this on https://wojtek.denisdev.pl and when I remove "position: absolute" part of "style", then the boar rotates. I've seen that people join both (like here: CSS "transform: rotate()" affecting overall design with "position: absolute" (not aligning properly)), but it doesn't work for me...


Solution

  • from the link here https://wojtek.denisdev.pl i can see only one error from your css file that causes that error and here it is ;

    so your resulting css for the boar.png was

    transform: rotate(
    45deg) position: absolute;
    

    which was missing the the closing css tag ;

    for it to work, copy and replace this code with the above code in the boar.png line completely

    <img src="boar.png" id="1" style="transform: rotate(45deg);position: absolute;">