2
CSS 전환을 사용하여 웹킷에서 전체 360도 회전하는 데 어려움이 있습니다. http://jsfiddle.net/russelluresti/PnTk8/2/는Webkit CSS 전환 회전 회전하지 않음
의 전환은 2 단계에서 발생한다 :
내가 할 노력하고있어 보여주기 위해 JS 바이올린을 만들었습니다. 먼저 아이템은 Y 축을 따라 1/2 회전해야합니다. 그런 다음 전환이 완료되면 반대 방향을 완전히 돌리고 원래 크기의 1/2로 축소해야합니다. 내가 가지고있는 문제는 rotateY(-360deg) 및 rotateY(0deg)의 회전 값이 전체 회전을 야기하더라도 두 번째 변환은 크기 조정 및 회전 만한다는 것입니다.
이것은 개념 증명 일 뿐이므로 지금은 웹킷 만 타겟팅하고 있습니다. 그러나 나는 전환을 고수하고 키 프레임 애니메이션을 사용하지 않습니다. 어떤 아이디어?
보기가 동일 할 수도 있지만 0도 회전과 -360도 회전 사이에는 차이가 있습니다. 나는 약간의 바이올린을 넣어서 0에서 -360 도로 회전하는 아이템을 바꿀 수 있음을 보여 주었다. http://jsfiddle.net/russelluresti/LXv5v/ 웬일인지, 나의 예에서는 예상대로 작동하지 않는다. 제 2의 이행이 제정되고있다. – RussellUresti
@RussellUresti http://jsfiddle.net/linmic/CpdJG/를 모방 한 데모를 다시 작성하고 원하는대로 완벽하게 작동합니다. 원래의 경우, 여전히 문제를 해결하는 데 어려움이 있습니다. – Linmic
이것은 작동하는 것 같습니다. 이 코드와 다른 코드가 다른 점을 알아낼 수는 없지만 (컨테이너가 아닌 이미지를 타겟팅하는 것과 같이 차이를 만들어서는 안되는 것을 제외하고), 시작부터 끝까지 좋은 기준으로 보입니다. 내가 원하는 위치 지정 및 마크 업을 다시 적용하십시오. 감사. – RussellUresti