HTML5 및 CSS3의 iPhone 전환 및 애니메이션

jQTouch 및 jQuery Mobile과 같은 JavaScript 프레임 워크를 사용하지 않고 HTML5 및 CSS3 만 사용하여 기본 iOS 페이지 뒤집기 애니메이션 및 유사한 전환을 모방하는 방법이 있습니까?HTML5 및 CSS3의 iPhone 전환 및 애니메이션

나는 기본적으로 자바 스크립트없이하지만 이들을 모방하려는 : 가 http://www.jqtouch.com/preview/demos/main/#animations 네이 물건은 CSS 3D 변환을 수행 할 수 있습니다

출처

2010-12-06 Alex

http://www.20thingsilearned.com/은 jQuery를 사용하지만 CSS3를 사용하여 많은 UI 애니메이션을 만들 수 없다는 사실을 입증하지 못했습니다. – hlfcoding

예, jQtouch CSS 파일 (jqtouch.css)을 살펴보십시오.

모든 애니메이션이 여기에 나열됩니다. 예를 들어 :

@-webkit-keyframes flipRightIn { 
    0% { 
     -webkit-transform: rotateY(-180deg) scale(.8); 
    } 
    100% { 
     -webkit-transform: rotateY(0deg) scale(1); 
    } 
} 

@-webkit-keyframes flipRightOut { 
    0% { 
     -webkit-transform: rotateY(0deg) scale(1); 
    } 
    100% { 
     -webkit-transform: rotateY(180deg) scale(.8); 
    } 
}

그런 다음 애니메이션 클래스를 만들 : (이 MIT 라이센스 이후) 및 소스 속성하는 것을 잊지 마세요 당신이 필요

.flipright.in { 
    -webkit-animation-name: flipRightIn; 
}

풀을.

출처

2011-10-25 19:32:00

(제대로 렌더링하기 위해 당신이 아이폰에이 페이지를 볼 수 있어야합니다). 훌륭한 소개가 있습니다 (여기에 뒤 따르는 페이지 뒤집기 애니메이션의 예가 포함되어 있습니다) : http://24ways.org/2010/intro-to-css-3d-transforms. 이 제품은 현재 브라우저 간 지원이 크지 않지만 iOS에서 작동하려면 브라우저가 정상적으로 작동해야합니다.

출처

2011-03-17 15:21:41 warmanp

HTML5 및 CSS3의 iPhone 전환 및 애니메이션

답변

관련 문제