Form does not rotate around center axis (x,y) - css

Question

Even though I have set [transform-origin: 100% 50%;] in css, the form does not rotate around its center in comparison to X- and Y- axis.
Question: How can I make the form rotate counted exactly from its midpoint.
.box {
background-color: pink;
margin: 300px 0 0 300px;
width: 200px;
height: 200px;
}
.box {
position: absolute;
animation: spin 10s;
animation-fill-mode: forwards;
}
.line-horizontal {
background-color: black;
width: 200px;
height: 5px;
margin: 100px 0 0 0;
}
.line-vertical {
background-color: black;
width: 5px;
height: 200px;
margin: -105px 0 0 100px;
}
#keyframes spin {
from {
transform:rotate(0deg);
transform-origin: 100% 50%;
}
to {
transform:rotate(360deg);
}
}
<div class="box">
<div class="line-horizontal"></div>
<div class="line-vertical"></div>
</div>

Answer 1

Change the tranform-origin to 50% 50% instead which means the center in both axis and don't put it inside the keyframes because it will get animated
.box {
background-color: pink;
width: 200px;
height: 200px;
}
.box {
position: absolute;
animation: spin 10s;
animation-fill-mode: forwards;
transform-origin: 50% 50%;
/*center*/
}
.line-horizontal {
background-color: black;
width: 200px;
height: 5px;
margin: 100px 0 0 0;
}
.line-vertical {
background-color: black;
width: 5px;
height: 200px;
margin: -105px 0 0 100px;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="box">
<div class="line-horizontal"></div>
<div class="line-vertical"></div>
</div>
You can also simplify your code like below in case you need the same visual:
.box {
width: 200px;
height: 200px;
background:
linear-gradient(#000,#000) center/100% 5px,
linear-gradient(#000,#000) center/5px 100%,
pink;
background-repeat:no-repeat;
animation: spin 10s forwards;
transform-origin: 50% 50%; /* OR center*/
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="box">
</div>