iPhone遷移とjQTouchとjQueryモバイルのようなJavaScriptフレームワークを使用せずにHTML5とCSS3

Question

でアニメーション、唯一のHTML5とCSS3を使用して、ネイティブのiOSページフリップアニメーションと同様の推移を模倣する方法はありますか？

私は基本的にはJavaScriptをせずにこれらのを模倣したい： http://www.jqtouch.com/preview/demos/main/#animations（それが適切にレンダリングするためにあなたがiPhone上でこのページを表示する必要があります）

Answer 1

はい、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); 
    } 
} 

はその後アニメーションクラスを作成します。

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

は（それはMITがライセンスなので）あなたが必要なものを引いて、あなたのソースを属性することを忘れないでください。

Answer 2

うんこのようなものは、CSS 3Dトランスフォームで行うことができます。素晴らしい紹介（あなたが行っているページフリップアニメーションの例を含む）はここにあります：http://24ways.org/2010/intro-to-css-3d-transforms。このようなものは、現時点ではブラウザ間での大きなサポートはありませんが、iOSで動作させるために必要なのであれば問題ありません。