기초 css animation 질문입니다.

Question

이런질문을 하자니 많이 부끄럽습니다.하지만 어떻게 키워드를 잡고 구글링을 해야할지 머리가 돌아가지 않아 질문 남깁니다.<동일 구현 소스>https://codepen.io/Lilpha/pen/pvzzeKyimg태그에 animation - rotate를 넣어서 사용하고 있습니다.중심에 있는 이미지가 디스플레이에서 cneter를 맞춘 상태의 객체이고, 이 객체에 rotate를 적용시키면 오른쪽 아래로 밀리는 문제를 겪고있습니다.회전이 적용된 객체의 좌 상단이 기존 객체의 중심점에 위치하게 되는데, 이 문제를 어떻게 해결해야 할 지 잘 모르겠습니다.tranform origin은 객체 회전의 중심축을 담당하는 것으로 이해해서, 적용하여도 제가 원하는 결과가 나오지 않았습니다.이 글 보시는 모든 분들이 좋은 하루를 보내시면 좋겠습니다. 감사합니다.

핸호 · Answer

현재 작업중인 css 코드를 같이 올려주시면 좋을것 같습니다

가니메디안 · Answer

원하시는 결과물에 정확히 일치하는지 모르겠습니다만, 코드펜 소스를 덧붙입니다.https://codepen.io/Gunymedian/pen/KwPPNaq의 코드transform: rotate(100deg) translate(5px, 5px);에서,스핀 축 지정은translate 속성입니다. 0 으로 지정하면 제자리에서 회전하겠죠. 필요한 만큼 회전과 회전축, 그리고 fade in/out 을 지정해줄 수 있습니다.

기초 css animation 질문입니다.

2개의 답변

기술 목록