如何用css3实现360度旋转动画

2024-11-15 00:11:00

推荐回答（2个）

回答1：

写了例子，效果不是很好，仅供参考


　　
    
    　　
    　　IE浏览器CSS transform旋转属性的演示
    　　
    　　
            body { font-family: "Arial", sans-serif; }
            #example {
                position: absolute; 
                top: 100px; 
                left: 100px; 
                border: #09f solid 1px; 
                font-weight: 900; 
                color: #09f; 
                display: block; 
                width: 200px; 
                height: 200px; 
                text-align:center;
                line-height:200px;
                cursor:pointer;
            }
    　　
    　　
    
    
    　　.

            function rotate(percent, scale){
                var radian = Math.PI * percent;
                var angle  = 180 * percent;
                var scale  = 0.8;
                var style  = document.getElementById("example").style;
                var transform = "rotate("+ angle +"deg) scale("+ scale +")";

                style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+Math.cos(radian)*scale+",M12="+(Math.sin(radian) * -1)*scale+",M21="+Math.sin(radian)*scale+",M22="+Math.cos(radian)*scale+");";
                style.MozTransform    = transform;
                style.WebkitTransform = transform;
                style.OTransform      = transform;
                style.Transform       = transform;
            }
            i=0.25;
            setInterval("rotate(i);i+=0.01", 10);

回答2：

transform:rotate(180deg) deg就是只2维的多少度