css3 transform实现简单翻转

reversal

/**
  part of html
    <div id="box">    	
        <div id="preserve-box">
    		<div class="front">我是正面</div>
    		<div class="bottom">我是反面</div>
        </div>
    </div>
**/

/* part of css*/

* {
		margin: 0;
		padding: 0;
	}
	#box{
		position: relative;
		width: 180px;
		height: 180px;
		margin: 0 auto;
		-webkit-perspective: 800px;
	}
	.front,.bottom{
		position: absolute;
		left: 0;
		top: 0;
		width: 180px;
		height: 180px;
		text-align: center;
		line-height: 180px;
		-webkit-border-radius: 90px 90px;
		border-radius: 90px 90px;
		-webkit-transition: 1s ease-in-out;
		transition: 1s ease-in-out;
	}
	#preserve-box .front{
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		background: #56BEF5;
	}
	#preserve-box:hover .front{
		-webkit-transform: rotateY(180deg);
	}
	#preserve-box .bottom{
		background: #FD99E9;
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		-webkit-transform: rotateY(-180deg);	
	}	
	#preserve-box:hover .bottom{
		-webkit-transform: rotateY(0deg);
	}