css3-transform-matrix 即矩阵实现物体旋转、缩放、移动效果

最新推荐文章于 2024-08-15 13:54:22 发布

yibin94

最新推荐文章于 2024-08-15 13:54:22 发布

阅读量3.6k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/Inite/article/details/54177492

版权

本文介绍了如何使用css3的transform-matrix属性来创建复杂的3D动画，如物体的旋转、缩放和移动。在遇到jQuery动画与旋转结合失效的问题后，作者转向使用css3-transform-matrix，提供了相关演示链接和自定义的demo，以实现地毯展开过程中圆卷的动态变化效果。

摘要由CSDN通过智能技术生成

我想做个模拟地毯展开的动画效果，其侧面的圆卷要由大随着地毯展开而逐渐变小，并在此过程中需要滚动（旋转）；一开始在网上搜了旋转的代码，很简单的一个方法是利用 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) {