2010-06-22 5 views
1

CSS를 통해 페이지의 일부분 (이 경우 단일 클래스)을 천천히 회전시킬 수 있습니까? 현재 코드 :CSS를 통해 페이지를 천천히 회전

.c1 
{ 
-webkit-transform: rotate(170deg); 
-moz-transform: rotate(170deg); 
-o-transform: rotate(170deg); 
} 

불행히도 내가 가지고있는 액세스 권한으로 자바 스크립트를 사용할 방법이 없습니다.

롤오버에서이 클래스를 회전하거나 마우스가 맨 위에 있거나 단순히 회전 만하는 방법이 있습니까? 이것은 CSS를 통해 완전히 이루어져야합니다.

도움 주셔서 감사합니다. 나는 이것이 이상한 요구라는 것을 알고 있지만 대답을 찾기를 희망한다.

+1

AFAIK를, 이것은 단지 행할 것 Safari에서. 이 링크는 도움이 될 수 있습니다 : http://stackoverflow.com/questions/2584138/css3-continous-rotate-animation-just-like-a-loading-sundial –

+0

웹킷을 사용하는 다른 브라우저가 그렇게 할 수 없습니까? Chrome과 FF에서 주로 작동해야하지만, FF는 게코를 렌더링에 사용합니다. – Cyclone

+0

Hehehe ... Chrome에서 작동합니다. 이제 FF 만 있으면됩니다. – Cyclone

답변

0

Firefox의 경우 this page에 대한 유용한 힌트와 팁이 있습니다. :) 같은

뭔가 :

당신이 가지고 있지만, 파이어 폭스는 버전 3.1에서 지원하는 최대 있습니다 무엇
.transformed { 
    -webkit-transform: rotate(15deg) scale(1.25, 0.5); 
    -moz-transform: rotate(15deg) scale(1.25, 0.5); 
    transform: rotate(15deg) scale(1.25, 0.5); 
} 

. :)

파이어 폭스
+0

해당 페이지에서 언급 한 애니메이션이 필요하지 않습니다. 그래도 도와 ​​줘서 고마워! 게시 한 코드는 본질적으로 이미 가지고있는 코드입니다. – Cyclone

1

: 크롬, 사파리와 오페라를 들어

-moz-transform: rotate(15deg) scale(1.25, 0.5); 
transform: rotate(15deg) scale(1.25, 0.5); 

:

-webkit-transform: rotate(15deg) scale(1.25, 0.5); 

그리고 Internet Explorer가이 지원하지 않습니다 :]

관련 문제