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转换和动画

回答

相关问题