앤티 앨리어싱을 방지하면서 CSS3 호버 천이를 부드럽게하기

Question

previous question에서 엘리먼트가 올려 졌을 때 CSS3 전환을 사용하여 엘리먼트를 회전시킴으로써 발생하는 앤티 앨리어싱을 수정하는 방법을 알았습니다. 그러나이 수정으로 전환이 변경되었습니다. 수정 전에는 처음부터 끝까지 부드럽게 전환했습니다. 수정 이후, 전환은 매우 엄격 해졌습니다. (파이어 폭스를 사용할 때 전환이 원활하지 않았지만 앤티 앨리어싱 수정 이전에 Safari 나 Chrome을 사용했다는 사실에 유의해야합니다.)

다음은 원래 사용한 코드입니다.

http://jsfiddle.net/CRc9d/

그리고 여기에 앤티 앨리어싱에 대한 수정과 코드 :

http://jsfiddle.net/JMgxC/

이 있는가하면 크롬이나 사파리에 있다면 당신은 상자 위에 마우스를 올려 때의 전환을 참고 앤티 앨리어스 수정을 유지하면서 깨끗한 전환을 제공하도록 두 번째 코드를 조정하는 방법?

Answer 1

이것은 이전에 겪었던 전환 문제와 비슷합니다. Divine을 왼쪽에서 오른쪽으로 움직일 때 나는 매끄럽지 않은 전환을했다. 해결책은 3 개의 CSS 상태 모두에 왼쪽 값 (0px, 300px, 300px)이 있는지 확인하는 것입니다. 파이어 폭스, 크롬, 사파리, 오페라의 경우 전환이 순탄했다. 귀하의 경우, 전환하려는 초기 값을 지정할 수 있습니다.

Answer 2

사용

-moz-transition-property:-moz-transform; 

대신 -webkit에 대한

-moz-transition-property:rotate; 

동감의.