@keyframes rotate 를 했는데 중심이 이동하면서 돕니다

[김석화]

회전 전 
회전 후
중심이 묘하게 안맞습니다.
혹시나해서 기존에 해놨던 세팅에서 틀어짐을 발생하게 하는건가 싶어서
html,css를 아예 새로 만들고 그위에 띄워서 해봤는데도 중심이 스윽하고 이동합니다..
제가 어디를 놓친걸까요??

• html

<div class="ani-x">+</div>

 

• css

.cross {
margin: 150 auto;
text-align: center;
width: 84px;
font-size: 100px;
cursor: pointer;
}

.cross:hover {
animation-name: 확대;
animation-duration: 1s;
animation-fill-mode: forwards;
}

@keyframes 확대 {
0% {transform: rotate(0deg)}
25% {transform: rotate(-20deg)}
100% {transform: rotate(45deg) scale(1.5)}
}

[codingapple]

transform-origin 속성으로 기준점 조절가능합니다 

[김석화]

감사합니다 너무 스무스하게 가운데에서 돌아가네요 transform-origin 잊지않겠습니다..

[이예나]

.cross{
    width: 50px;
    margin: 50px auto;
    font-size: 60px;
    text-align: center;
    cursor: pointer;
    transform-origin: center center;
}

^
transform-origin 속성으로 기준점 조절했음에도 가운데에서 돌아가지 않는 이유가 뭔가요??
html은 동일합니다
계속 구글링 해도 해결이 되지 않아 질문합니다

.cross:hover{
    animation-name: plus;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes plus{
    0%{
        transform: rotate(0deg);
    }

    25%{
        transform: rotate(-30deg);
    }

    100%{
        transform: rotate(45deg) scale(1.5);
    }

}

[codingapple]

기준점을 가운데말고 %로 조절하거나 
글자 폭이나 크기를 조절해봅시다

[리토]

선생님! 안녕하세요 +가 위의 공간이 생기는 것은 +가 글자가 아닌 기호라서 그런 것 같은데

제가 제대로 이해한 것이 맞는 건가요?

.ani-x{
  margin: 150px auto;
  text-align: center;
  font-size: 70px;
  width: 84px;
  height: 84px;
  line-height: 84px;
  border: 1px solid #000;
  cursor: pointer;
}

맞다면 둘 다 클래스 .ani-x를 똑같이 준 것인데

+는 가운데로 보낼 수 있는 방법은 역시 없는 걸까요?

[codingapple]

폰트만든 사람이 + 기호위에 공백을 많이 집어넣어서 그럴 뿐입니다 position 줘서 움직여봅시다

[리토]

넵! 감사합니다.

[글쓴이]

글