CSS3 3D反转图片的实现

CSS3 3D反转图片的实现

			div{
				margin: 100px auto;
				width: 300px;
				position: relative;
			}
			img{
				width: 300px;
				position: absolute;
				top: 0;
				left: 0;
				transition: all 0.8s; 
			}
			img:first-child{
				z-index: 1;  /* 因为后面图片会覆盖前面图片,因此增加前面图片的权重 */
				backface-visibility: hidden;  /* 当不是前面图片对向屏幕时,隐藏前面图片,显示后面图片 */
			}
			div:hover img{
				transform: rotateY(180deg);
			}

		<div>
			<img src="img/qian.jpg" alt="我是正面">
			<img src="img/hou.jpg" alt="我是反面" >
		</div>