Transform origin property not working properly

HTML-CSS
1

Hi I’m trying to make some effect using transform property on hover. But it’s not working properly . I don’t know where the problem is ?
Actually I want my div square to rotate around it’s left bottom corner when I hover over it. But sometime it’s rotating around it’s left bottom corner and sometime it’s rotating around it’s center. Please help me to fix it . Here is my codepen link and code so far.
CodePen Link

`<html>
    <head>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .main-container{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: lightblue;
                height: 100vh;
            }
            .child-container{
                height: 200px; 
                width: 200px;
                background-color: lightgreen;
                transition-property: all;
                transition-duration: 2s;
            }
            .child-container:hover{
                transform: rotate(360deg);
                transform-origin: left bottom;

            }
        </style>
    </head>
    <body>
        <div class="main-container">
            <div class="child-container"></div>
        </div>
    </body>
</html>`
2

Just move the transform-origin from the hover selector to the container.

1 Like
3

Yeah that worked :slight_smile:
Thank you so much

But why this is not working when origin set with hover state?

4

Technically if you set the transition-property to transform instead of all it also works. However, then it will return back to its default transform-origin which is center.

The transform-origin property is an animatable CSS property, so because of transition-property: all it will transition the origin from the default center to the left bottom and that only takes effect after the transition is done and the first rotate has finished. You then get the rotate with the origin at the left bottom when you “hover off”. If that makes sense.