I'm trying to make the line fall down in the left side of border of the box but I don't get what's wrong.

Here is the sample

       @import url('https://fonts.googleapis.com/css2?family=Bebas Neue&family=Grey Qo&family=Jost:wght@100&family=Loved by the King&family=Luckiest Guy&family=Lusitana&family=Medula One&family=Michroma&family=Petrona:wght@200&family=Philosopher&family=Ranga&display=swap');
        *,*::after,*::before {
            padding: 0;
            margin: 0;
        }
        :root {
            --rotation-xy:0deg;
        }
        .container {
            width: 100%;
            height: 100vh;
            position: relative;
            background: #000;
            overflow: hidden;
            
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .box {
            width: 200px;
            height: 200px;
            /* background: yellow; */
            border: 2px solid yellow;
            border-top: 0px;
            position: relative;
        }

        .line {
            width: 100%;
            height: 2px;
            top: 0;
            left: 0;
            transform: rotate(0deg);
            z-index: 10;
            background: red;
            position: absolute;
            animation: anim 6s ease-in-out forwards;
        }

        @keyframes anim {
            100% {
                transform: rotate(90deg) translate(-50%,-50%);
            }
        }

    <div >

        <div >
            <div ></div>
        </div>

    </div>

I expect it to be like this. I search something related to it like a clock rotating on whatsoever or quarter circle rotating line but its not the same as I wanted to happen. IMAGE HERE

CodePudding user response：

You need to use the transform-origin property along with rotate. LINK

And remove the useless translate

Like this:

       @import url('https://fonts.googleapis.com/css2?family=Bebas Neue&family=Grey Qo&family=Jost:wght@100&family=Loved by the King&family=Luckiest Guy&family=Lusitana&family=Medula One&family=Michroma&family=Petrona:wght@200&family=Philosopher&family=Ranga&display=swap');
        *,*::after,*::before {
            padding: 0;
            margin: 0;
        }
        :root {
            --rotation-xy:0deg;
        }
        .container {
            width: 100%;
            height: 100vh;
            position: relative;
            background: #000;
            overflow: hidden;
            
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .box {
            width: 200px;
            height: 200px;
            /* background: yellow; */
            border: 2px solid yellow;
            border-top: 0px;
            position: relative;
        }

        .line {
            width: 100%;
            height: 2px;
            top: 0;
            left: 0;
            transform: rotate(0deg);
            z-index: 10;
            background: red;
            position: absolute;
            animation: anim 6s ease-in-out forwards;
            transform-origin: 0% 0%;
        }

        @keyframes anim {
            100% {
                transform: rotate(90deg);
            }
        }

    <div >

        <div >
            <div ></div>
        </div>

    </div>