[html, css] 이미지의 transform 시 되돌아옴 문제

Question

안녕하세요 웹페이지를 제작 중입니다.음,, 이미지를 토글 버튼으로 사용하고 있는데요 css 에서 :active와 transform, transition을 이용하여 &#43;를 X로 45도 돌리고자 합니다. 문제는 transform: rotate(45deg); 실행이 마우스클릭을 하면 실행 되었다가 다시 원래대로 돌아가고 있습니다.&#43; -> x -> &#43; 이동작이 반복되는데요 어떻게 해결해야 할까요?

니플 · Answer

해당 소스를 보여줄 수 있으신가요?

ramesell · Answer

css 아래와 같습니다..Button{ transition: transform .3s; } .Button:active{ transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); }

ramesell · Answer

신입닙 css로 구현하기 힘들어서 그냥 js로 해결해 버렸습니다.

니플 · Answer

네 js로 밖에 안되요css로하면 해당 모션에 대한 동작으로 보여지기때문에 안되죠

[html, css] 이미지의 transform 시 되돌아옴 문제

4개의 답변

#transition 목록