css实现图片翻转动画

 主要是将两张图片重叠放在一起，然后实现翻转
使用 backface-visibility:hidden  属性，让正面图的背面不显示

效果:

html:

<view class="icon_img">
//正面图
			<image class="zhengImg rotateAmview" src="http://cdn.za3.cn/official_img/index/home_bg.png"></image>
//背面图
			<view class="fanImg rotateAmview">
				<image  src="http://cdn.za3.cn/official_img/index/home_video.png"></image>
			</view>
		</view>

 css:

.icon_img{
		width: 350rpx;
		height: 300rpx;
		position: relative;
		margin: 0 auto;
		.zhengImg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index:1;
			backface-visibility:hidden;
		}
		.fanImg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			image{
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transform: rotateY(180deg);
			}
		}
		@keyframes rotateAm{
				0%{
					transform: scale(1,1) translate3d(0, 0, 0) rotateY(0deg);
					bottom: 0;
				}
				5%{
					transform: scale(1.4,0.6);
					bottom: 3%;
				}
				10%{
					transform: scale(1,1);
					bottom: 0;
				}
				15%{
					transform:scale(1,1) translate3d(0, 0, 0) rotateY(180deg);
				}
				
				50%{
					transform:scale(1,1) translate3d(0, 0, 0) rotateY(180deg);
				}
				55%{
					transform: scale(1.4,0.6) rotateY(180deg);
					bottom: 3%;
				}
				60%{
					transform: scale(1,1) rotateY(180deg);
					bottom: 0;
				}
				65%{
					transform: scale(1,1) translate3d(0, 0, 0) rotateY(0deg);
				}
				
			}
			.rotateAmview{
				transform:translate3d(0, 0, 0) ;
				transform-origin: center center;
				animation: rotateAm 12s  linear  infinite;
				animation-fill-mode: forwards;
				position: absolute;
				bottom: 0;
				left: calc(50% - 43rpx);
			}
	}