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 class="container">
<div class="box">
<div class="line"></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
>Solution :
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 class="container">
<div class="box">
<div class="line"></div>
</div>
</div>