css3中的3D变换实现图片旋转效果

css3中的3D变换实现图片旋转效果

html:

<div class="box1"></div>
<br />
<div class="box2"></div>
<br />
<div class="box3"></div>
<br />
<div class="box4"></div>

css:

<style type="text/css">
	body{
		background-color: #6495ED;
	}
	/*360°旋转 修改rotate(旋转度数)   */
	.box1{
		width: 300px;
		height: 300px;
		background-color: white;
		
		transition:All 0.4s ease-in-out;
		-webkit-transition:All 0.6s ease-in-out;
		-moz-transition:All 0.6s ease-in-out;
		-o-transition:All 0.6s ease-in-out;
	}
	.box1:hover{
		background-color: green;
        transform:rotate(360deg);
       	-webkit-transform:rotate(360deg);
       	-moz-transform:rotate(360deg);
      	-o-transform:rotate(360deg);
       	-ms-transform:rotate(360deg);
	}
	/*放大 修改scale(放大的值)*/    
	.box2{
		width: 300px;
		height: 300px;
		background-color: white;
		
		transition:All 0.4s ease-in-out;
		-webkit-transition:All 0.6s ease-in-out;
		-moz-transition:All 0.6s ease-in-out;
		-o-transition:All 0.6s ease-in-out;
	}
	.box2:hover{
		background-color: green;
        transform:scale(1.2);
       	-webkit-transform:scale(1.2);
       	-moz-transform:scale(1.2);
      	-o-transform:scale(1.2);
       	-ms-transform:scale(1.2);
	}
	/*旋转放大 修改rotate(旋转度数) scale(放大值)*/     
	.box3{
		width: 300px;
		height: 300px;
		background-color: white;
		transition:All 0.4s ease-in-out;
		-webkit-transition:All 0.6s ease-in-out;
		-moz-transition:All 0.6s ease-in-out;
		-o-transition:All 0.6s ease-in-out;
	}
	.box3:hover{
		background-color: green;
        transform:rotate(360deg) scale(1.2);
       	-webkit-transform:rotate(360deg) scale(1.2);
       	-moz-transform:rotate(360deg) scale(1.2)
      	-o-transform:rotate(360deg) scale(1.2);
       	-ms-transform:rotate(360deg) scale(1.2);
	}
	/*上下左右移动 修改translate(x轴,y轴)*/  
	.box4{
		width: 300px;
		height: 300px;
		background-color: white;
		transition:All 0.4s ease-in-out;
		-webkit-transition:All 0.6s ease-in-out;
		-moz-transition:All 0.6s ease-in-out;
		-o-transition:All 0.6s ease-in-out;
	}
	.box4:hover{
		background-color: green;
        transform:translate(0,-10px);
       	-webkit-transform:translate(0,-10px);
       	-moz-transform:translate(0,-10px);
      	-o-transform:translate(0,-10px);
       	-ms-transform:translate(0,-10px);
	}
</style>