css3 按钮翻转效果

css3 按钮翻转效果

html

<div class="flipper">
	<span class="flipper-object flipper-vertical">
		<span class="panel front">the front</span>
		<span class="panel back">the back</span>
	</span>
</div>

css

.flipper {
	position: relative;
	width: 300px;
	height: 44px;
	perspective: 300px;
}
.flipper-object {
	position:absolute;
	transition: transform 1s;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}
.panel {
	border: 1px solid black;
	position: absolute;
	backface-visibility: hidden;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.flipper-vertical .back {
	transform: rotateX(180deg);
}
.flipper:hover .flipper-vertical {
	transform: rotateX(180deg);
}

转载，出处：css3 按钮翻转
作者主页：http://jsrun.net/u/fangbinwei/code