HTML5和CSS3中的iPhone轉換和動畫

沒有使用像jQTouch和jQuery Mobile這樣的JavaScript框架，有沒有一種方法可以模仿原生iOS頁面翻轉動畫以及僅使用HTML5和CSS3的類似轉換？HTML5和CSS3中的iPhone轉換和動畫

我基本上想模仿這些，但沒有JavaScript： http://www.jqtouch.com/preview/demos/main/#animations（您必須在iPhone上查看此頁面才能正常渲染）

2010-12-06 Alex

http://www.20thingsilearned.com/既不使用也沒有證明大量的UI動畫可以使用CSS3完成，儘管它也使用jQuery。 – hlfcoding 2011-01-25 06:37:42

是的，只要看看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許可），不要忘記屬性源。

來源

2011-10-25 19:32:00

沒錯這個東西可以用CSS 3D轉換來完成。這裏有一個很好的介紹（其中包括你翻頁後的動畫）：http://24ways.org/2010/intro-to-css-3d-transforms。這些東西目前沒有很好的跨瀏覽器支持，但如果你只需要它在iOS上工作，你應該沒問題。

來源

2011-03-17 15:21:41 warmanp

HTML5和CSS3中的iPhone轉換和動畫

回答

相關問題