我想做个模拟地毯展开的动画效果,其侧面的圆卷要由大随着地毯展开而逐渐变小,并在此过程中需要滚动(旋转);一开始在网上搜了旋转的代码,很简单的一个方法是利用 jQuery 的插件 jQueryRotate.2.2.js(其中一个版本),然后直接在 js 调用其中已经封装好的 Rotate(deg) 即可实现物体旋转的效果,结果当我为该物体加上 jQuery 的 animation 动画让其产生位置的改变动画时却发现未能起作用,不知道是浏览器的兼容问题还是本身就不行,所以只能继续百度搜索其它方法,发现 css3-transform-matrix 有多个参数可以设置缩放,旋转和平移的效果,具体代码如下:
var $css3Transform = function(element, v) {
//兼容多个浏览器。
var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length;
for (var i=0; i < length; ++i)
{
element.style[arrPriex[i] + "Transform"] = v;
}
};
var rotate = function() {//自转
if(flag==0){//用来标记只能获取一次不然会溢出(因为多次调用了此函数)。
$ = function(selector) {