CSS animation 적용후 객체의 위치 강제이동의 문제.

Question

현재 css를 이용하여서 레코드판의 회전을 구현하고자 합니다.회전 이전에 레코드판을 디스플레이 기준 중앙정렬 하였고.이 레코드판에 animation이 들어가면 기존 객체의 &#34;회전&#34;중심점이, animation적용 객체의 좌 상단이 됩니다.그러므로 animation 적용객체는 기존의 객체와는 다른 위치에서 회전하게 됩니다.어떤방법으로 해결하는 것이 좋을까요?https://codepen.io/Lilpha/pen/pvzzeKy구현 코드 첨부합니다.감사합니다.

킁킁탐정 · Answer

원하시는게 맞는지 모르겠지만 대충 고쳐보면 다음과 같습니다.https://jsfiddle.net/3tokmf7g/3/중요한 부부분은 position: relative입니다. 부모(div class&#61;rel)를 기준으로 상대 좌표를 갖게 됩니다.그러므로 div로 전체를 감싸서 하나의 부모로 상대 좌표를 동일하게 만들면 회전해도 문제가발생하지 않게됩니다. 그리고나서 부모의 부모(div class&#61;mov)를 적절하게 화면상에 원하는 위치로 이동합니다.

CSS animation 적용후 객체의 위치 강제이동의 문제.

1개의 답변

기술 목록