CSS3 3D变换--扑克牌翻转

学了css的3D变换后，想自己做一个扑克牌的翻转效果，那么怎么来实现呢，一起来试试吧！

思路：

• 首先写出牌面的文字和结构，在设置牌面的变换时，将变换的牌正面和背面放在一个父容器里，即需要四个父容器，这四个容器可以放在一个大的div里。
• 后采用层定位让牌面的正面和背面有一个叠加的效果，先显示图片，当鼠标悬停时产生3D变换，于是显示牌的背面。

来看看最终效果图：
鼠标移入时翻转页面的效果：

HTML基本结构如下：

<div id="card">
			<div class="box">
				<div class="face front"> <!--正面-->
					<span class="number">A</span>
           			<span class="icon">♠</span>
           			<span class="center">♠</span>
           			<span class="bottom">♠</span>
           			<span class="bottom_num">A</span>
				</div>
				<div class="face back"><h3>这是黑桃A</h3></div><!--反面-->
			</div>
			
			<div class="box">
				<div class="face front"> 
					<span class="number red">2</span>
           			<span class="icon red">♥</span>
           			<span class="center red">♥</span>
           			<span class="bottom red">♥</span>
           			<span class="bottom_num red">2</span>
				</div>
				<div class="face back"><h3>这是红桃2</h3></div>
			</div>
			
			<div class="box">
				<div class="face front"> 
					<span class="number">3</span>
           			<span class="icon">♣</span>
           			<span class="center">♣</span>
           			<span class="bottom">♣</span>
           			<span class="bottom_num">3</span>
				</div>
				<div class="face back"><h3>这是草花3</h3></div>
			</div>
			
			<div class="box">
				<div class="face front"> 
					<span class="number red">4</span>
           			<span class="icon red">♦</span>
           			<span class="center red">♦</span>
           			<span class="bottom red">♦</span>
           			<span class="bottom_num red">4</span>
				</div>
				<div class="face back"><h3>这是方片4</h3></div>
			</div>
		</div>

CSS样式如下：

       /*整体居中*/
		#card{
			margin: 100px auto;
		}
		/*每张牌的宽高及阴影*/
		.box{
			width: 230px;
			height: 320px;
			margin: 50px;
			border: 1px solid #656565;
			border-radius: 10px;
			transform-style: preserve-3d;
			transition: 1.5s;
			position: relative;
			box-shadow:-6px 9px 5px #8C8C8C ;
			float: left;
		}
		/*鼠标移入时翻转*/
		.box:hover{
			transform: rotateY(180deg);
		}
		/*牌样式*/
		.face{
			width: 230px;
			height: 320px;
			border-radius: 10px;
			position: absolute;
			backface-visibility: hidden;
		}
		/*正面背景*/
		.front{
			background-color: white;
		}
		/*图标排列*/
		span{
			display: block;
		}
		/*背面开始为翻转效果  不加则为镜面效果*/
		.back{
			transform: rotateY(180deg);
			background-color: #66512C;
		}
		/*背面字体样式*/
		.back h3{
			color: #FFFFFF;
			text-align: center;
			margin-top: 140px;
		}
		/*牌面字体定位*/
		.number,.bottom_num{
			font-size: 45px;
			padding-left: 10px;
		}
		.icon,.bottom{
			font-size: 25px;
			padding-left: 15px;
		}
		.center{
			font-size: 125px;
			height: 125px;
			line-height: 125px;
			padding-left: 70px;
		}
		.bottom,.bottom_num{
			transform: rotate(180deg);
		}
		.red{
			color: red;
		}

欢迎和我交流前端方面的知识，一起学习与进步。
希望本文对你有帮助哟！