JS完成硬币翻转效果

HTML部分： 

		<div class="bg">
				<div class="left"></div>
				<div class="right"></div>
		</div>

 CSS部分：

			.bg{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				border: 4px solid ;
				position: relative;
				transform-style: preserve-3d;//父级要保存3D状态，不可少
				transition: 1s;
			}
			.left{
				width: 300px;
				height: 300px;
				background: url(animation/bg.png) no-repeat 0px 0px;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.right{
				width: 300px;
				height: 300px;
				background: url(animation/bg.png) no-repeat -305px 0px;
				position: absolute;
				top: 0px;
				left: 0px;
				backface-visibility: hidden;//可以不设置这个属性
				transform: rotateY(180deg);//反转后即不可见
			}
			.bg:hover{
				transform: rotateY(180deg);
			}