没有jQuery Mobile Library的jQuery Mobile CSS3页面转换

CSS可以在这里找到：http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

转换代码从第1270行开始.如果你复制掉转换的所有CSS类,它只有大约6KB的信息.

以下是上述CSS文件中的一些示例代码：

.viewport-flip {
    -webkit-perspective: 1000;
    position: absolute;
}

.ui-mobile-viewport-transitioning,.ui-mobile-viewport-transitioning .ui-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flip {
    -webkit-animation-duration: .65s;
    -webkit-BACkface-visibility:hidden;
    -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
}

.flip.out {
    -webkit-transform: rotateY(-180deg) scale(.8);
    -webkit-animation-name: flipouttoleft;
}

.flip.in {
    -webkit-transform: rotateY(0) scale(1);
    -webkit-animation-name: flipinfromleft;
}

因此,要插入一个元素,您将添加.flip类和.in类,并翻出一个元素,您将添加.flip类和.out类.

此外,jQuery CSS仅包含-webkit-前缀,但如果您想支持更多浏览器,则可以添加其他前缀,如：-moz-,– o-等.