SOURCE

	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>

body{
			background-color: white;
		}
		.box{
			width: 280px;
			height:280px;
			/*border:1px solid black;*/
			margin: 100px auto;
			position: relative; 
		}
		.box > div{
			width: 100%;
			height: 100%;
			position: absolute;
			/*border:1px solid black;*/
			border-radius: 50%;
			transition: all 2s linear 0s;
			backface-visibility: hidden;
		}
		.box1{
			background:url('https://img0.baidu.com/it/u=4016269132,1611050377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750') left 0 no-repeat;
		}
		.box2{
			background:url('https://pic.52112.com/180323/180323_30/1MAxtbSJdP_small.jpg') right 0 no-repeat;
			transform: rotateY(180deg);
		}
		.box:hover .box1{
			transform: rotateY(180deg);
		}
		.box:hover .box2{
			transform: rotateY(0deg);
		}