transfrom : jQuery .animate 함수에서 rotateX

CSS를 사용하여 플립 효과를 수행하려고합니다. 어떻게 얻을 수 있습니다 -transfrom : jQuery .animate 함수에서 rotateX

transform: perspective(1200px) rotateX(0deg)

jQuery의 .animate() 기능을 사용

transform: perspective(1200px) rotateX(90deg)

에서?

jQuery 2D 변환 플러그인을 사용하려했지만 성공하지 못했습니다.

출처

2013-01-28 Anton Sementsov

사용자 정의 CSS 후크를 추가하기 만하면됩니다. 하지만, 나는 그것에 하나 이상의 논증을 전달할 수있는 표준을 모른다. –

여기에서 답을 시도해 볼 수 있습니다. 두 개의 인수를 허용하도록 수정해야합니다. http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions –

http://jsfiddle.net/ryleyb/ERRmd/ – Dom

기본 CSS를 사용하십시오. 다음과 같이 입력하십시오 :

.panel { 
    transform: perspective(1200px) rotateX(0deg); 
    transition: transform 0.5s linear; 
    -webkit-transition: transform 0.5s linear; 
} 
.panel.flip { 
    transform: perspective(1200px) rotateX(90deg); 
}

그런 다음 클래스를 토글하십시오.

출처

2013-01-28 20:39:14

감사합니다. 이 도움이되었지만 파이어 폭스에서만 작동합니다. 그런 식으로 코드를 재 작성하려고했는데 ... 내 코드를 답안에 넣겠습니다.하지만 도움이되지 않습니다 ... 플립 efect는 Firefox에서만 작동합니다 ... 어떻게 할 수 있습니까? 멀티 브라우저로 만드시겠습니까? –

IE10에서도 작동합니다. Chrome에서 작동하게하려면'-webkit-transform'을 추가하고'-webkit-transition'을'-webkit-transform'에 영향을 주도록 변경하십시오. –

transfrom : jQuery .animate 함수에서 rotateX

답변

관련 문제