css3属性小应用

transform  

向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

 

旋转：rotate（angle）

rotate（angle），通过指定的角度对元素进行2D旋转，正值时顺时针旋转，负值时将逆时针旋转。

transform：rotate(-20deg)

 //利用定时器实现圆圈转动效果
 var tmp=0
 function circleRun() {
        var circle = document.getElementById("circle")
        tmp=tmp+2;
        circle.style.transform='rotate('+tmp+'deg)'
        if(tmp==360){
            tmp=0;
        }
        setTimeout("circleRun()",20)
    }
    circleRun()

缩放：scale（）

缩放scale（）具有三种情况：scale(x，y)表示X、Y轴同时放缩（如果只给一个值，x、y轴同时缩放相同倍数，给2个不同得值则根据所给数值进行缩放）；scaleX（x）仅向水平方向缩放（x轴）；scaleY（y）仅向垂直方向缩放（y轴）；但他们的缩放中心点是一样的，中心点就是元素中心的位置，缩放倍数小于1表示缩小X呗，大于1表示放大x倍。

transform：scale(0.8) /*缩小0.8倍*/

//实现动画效果
function heartRun() {
        var heart1= document.getElementById("heart");
        if(heart1.style.transform == 'scale(0.8, 0.8)'){
            heart1.style.transform = "scale(1,1)"
        }else{
            heart1.style.transform = "scale(0.8,0.8)"
        }
        setTimeout("heartRun()",200)
        // 'scale(0.8,0.8)'
            // setTimeout("heartRun()",200);
    }
    heartRun()

 animation 属性 

function stretch(){
	var Line = document.getElementById("line").children;
	var num = new Array();
	for(var i=0;i<5;i++){
		num[i] = Math.random();
	}
	//alert(Line.length);
	for(var j =0;j< Line.length ;j++){
		//$(Line).eq(j).css("left",j*15);
		$(Line).eq(j).animate({"height":50*num[j]});
	}
	setTimeout("stretch()",100);
}
stretch()