正反面图片翻转css3

 主要用到的知识点是css3中transform 3D转换的rotateY(angle)转换方法，transition控制转换过程的动画。具体知识点可在菜鸟上查看学习。

html： 

		<div class="flip">
			<div class="flip-box">
				<a href="###" class="flip-item flip-item-front ">
					<img src="img/memory/ks0.png" alt=" ">
				</a>
				<a href="### " class="flip-item flip-item-back ">
					<img src="img/game/pro5.png" alt=" ">
				</a>
			</div>
		</div>

 css:

              html,body{
				width: 100%;
				height: 100%;
				margin: 0;
			}
			.flip {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				transform: translate3d(0, 0, 0);/*重要：父级申明转换类型为3D，translate3d(x,y,z)*/
				overflow: hidden;
			}
			
			.flip-box {
				position: relative;
				width: 110px;
				height: 140px;
			}
			
			.flip-item {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				transition: all .5s ease-in-out;/*动画*/
				transform-style: preserve-3d;
				backface-visibility: hidden;
				box-sizing: border-box;
			}
			
			.flip-item img {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				margin: 32px auto;
				display: block;
			}
			
			.flip-item-text {
				width: 100%;
				text-align: center;
				color: #fff;
			}
			
			.flip-item-front {
				transform: rotateY(0deg);
				z-index: 2;
			}
			
			.flip-item-back {
				transform: rotateY(180deg);
				z-index: 1;
			}
			
			.flip-item-back .flip-item-text {
				color: #fff;
			}
			/*控制翻转*/
			.flip-box:hover .flip-item-front {
				z-index: 1;
				transform: rotateY(180deg);
			}
			
			.flip-box:hover .flip-item-back {
				z-index: 2;
				transform: rotateY(0deg);
			}

js:如果想用鼠标控制翻转的话，css部分去掉 /*控制翻转*/以下的代码

			var flag = 0;
			$(".flip-box").click(function() {
				if(flag == 0) {
					$(".flip-item-front").css({
						"z-index": 1,
						"transform": "rotateY(180deg)"
					});
					$(".flip-item-back").css({
						"z-index": 2,
						"transform": "rotateY(0deg)"
					});
					flag = 1;
				} else {
					$(".flip-item-front").css({
						"z-index": 2,
						"transform": "rotateY(0deg)"
					});
					$(".flip-item-back").css({
						"z-index": 1,
						"transform": "rotateY(180deg)"
					});
					flag = 0;
				}
			});