I am working on a layout where I have a square and inside it, a circle. The square is positioned absolutely and the circle is positioned relatively, centered within the square. However, when I rotate the circle using the rotate property, it loses its center position and moves randomly.
Here is the HTML code:
<div class="square">
<div class="circle">
Dark
</div>
</div>
And here is the CSS code:
.circle{
width:80px;
height:80px;
border-radius:50%;
border: 1px solid black;
position:relative;
left:50%;
top:50%;
display:grid;
place-items:center;
transform:translate(-50%,-50%);
cursor:pointer;
transition:all 0.6s linear;
}
.square{
width:120px;
height:50px;
border: 1px solid black;
position: absolute;
margin:50px;
cursor:pointer;
transition:all 0.6s linear;
}
.circle:hover{
transform:rotateZ(200deg);
}
.square:hover{
transform:rotateZ(360deg);
}
I would appreciate any insights on how to fix this issue and why it is happening in the first place. I am curious to understand the root of this behavior and how to address it.