CSS3_3D旋转动画

旋转动画是用CSS3的2D 转换中的transform方法中的rotateY (angle)函数来完成的
HTML部分

<div class="flip">
		<div class="picture">
			<img src="images/01.jpg" alt="">
		</div>	
		<div class="picture">
			<img src="images/02.jpg" alt="">
		</div>
		<div class="picture">
			<img src="images/03.jpg" alt="">
		</div>
	</div>

CSS部分

body{
			background: #eee;
		}
		.flip{
			width: 1800px;
			height: 300px;
			margin: 200px auto;
		}
		.picture{
			width: 500px;
			height: 300px;
			float: left;
			margin-left: 100px;
		}
		.picture img{
			width: 500px;
			height: 300px;
			transition: 2s all;
		}
		.picture img:hover{
			transform: rotateY(.5turn);
		}