利用css简单实现一个翻牌的效果

<style type="text/css">
	div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{
		margin:0;
		padding:0;
	}
	body{
		width: 100%;
		background: black;
	}
	.box{
		position: relative;
		text-align: center;
		width: 300px;
		height: 300px;
		margin: 50px auto;
	}
	.box a{
		display: block;
		width: 300px;
		height: 300px;
		position: absolute;
		line-height: 300px;
		text-decoration: none;
		font-size: 60px;
		color: #fff;
		transition: all 3s;
		backface-visibility: hidden;
	}
	.a{
		background: red;
	}
	.b{
		background: blue;
		transform: rotateY(180deg);
	}
	.box:hover .a{
		transform: rotateY(180deg);
	}
	.box:hover .b{
		z-index: 2;
		transform: rotateY(360deg);
	}
</style>

<div class="box">
	<a class="b" href="#">反</a>
	<a class="a" href="#">正</a>
</div>

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓