css3 效果全（旋转，放大，倾斜，平移）

 

css代码如下

body{
			padding: 100px;
		}
		/*初始设置所有盒子大小及颜色*/
		div{
			width: 100px;
			height: 100px;
			background: #0f0;
			margin-top: 30px;
			/*设置过渡时间及效果*/
			transition: all 5s; 
		}
		
		.a:active{
			/*旋转 角度为360度*/
			transform: rotate(360deg);
		}
		.b:active{
			/*放大为原来的2倍 缩小为0-1倍*/
			transform: scale(2);
		}
		.c:active{
			/*倾斜为原来的45度 可为正负*/
			transform: skew(45deg);
		}
		.d:active{
			/*平移 可设两个值 中间用 "," 分开 第一个值为x 第二个值为Y轴*/
			transform: translate(300px);
		}

html代码如下：

		
旋转
		
放大
		
倾斜
		
平移