用css实现扑克牌，图片的翻转效果

╰+哭是因爲堅強的太久メ 2023-05-31 15:18 19阅读 0赞

## 用css实现扑克牌，图片的翻转效果 ##

话不多说，直接上代码！  
1.**实现商品图片的翻转以及信息的展示**（下面代码仅是个人想要效果的HTML代码，所有的class名称可根据自身需求进行改动）

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    	<style>
    		body { 
    			text-align: center;
    		}
    		.pictrue-animation { 
    			width: 1200px;
    			height: 120px;
    			background: pink;
    			margin: 5px auto;
    		}
    		.pictrue-animation > .img-show { 
    			width: 120px;
    			height: 120px;
    			background: orange;
    			margin: 0 15px;
    			float: left;
    		}
    		.img-show > .pictrue-mc { 
    			display: block;
    			width: 120px;
    			height: 100px;
    			margin: 0;
    			text-decoration: none;
    		}
    		.pictrue-mc .xx-show { 
    			width: 90px;
    			height: 18.5px;
    			background: pink;
    			line-height: 18.5px;
    			border-bottom: 2px solid green;
    			margin: 0 auto;
    		}
    		/*-------------------------扑克牌效果------------------------------------------*/
    		
    		/*-----------------------------pukepai----------------------*/
    		p .pictrue-show { 
    			width: 120px;
    			height: 80px;
    			border: none;
    			margin: 20px 0;
    		}
    		.img-show .xx-showbz { 
    			width: 120px;
    			height: 20px;
    			line-height: 20px;
    		}
    		.img-show .pictrue-mc .xx-show,.img-show .xx-showbz { 
    			background: purple;
    			text-align: center;
    			font-size: 12px;
    			color: white;
    			display: none;
    		}
    		.img-show:hover { 
    			margin: 0 15px;
    		}
    		.img-show:hover .pictrue-mc #wrap .pictrue-show { 
    			margin: 0;
    			padding: 0;
    		}
    		.img-show:hover .xx-show,.img-show:hover .xx-showbz { 
    			display: block;
    			
    		}
    		#wrap { 
    			width: 120px;
    			height: 80px;
    			margin: 20px 0;
    			padding: 0;
    			position: relative;
    			perspective: 800px;
    		}
    		#box { 
    			width: 120px;
    			height: 80px;
    			margin: 0;
    			padding: 0;
    			position: absolute;
    			left: 0;
    			top: 0;
    			transform-style:preserve-3d;
    		}
    		#box p { 
    			width: 120px;
    			height: 80px;
    			position: absolute;
    			backface-visibility: hidden;
    			top: -36px;
    			left: 0;
    		}
    		#box p:nth-of-type(1) { 
    			
    		transition:.8s transform;
    		}
        #box p:nth-of-type(2) { 
    		
    		transform:rotateY(-180deg);
    		transition:.8s transform;
    		}
        #box:hover p:nth-of-type(1) { 
    		transform:rotateY(180deg);
    		}
        #box:hover p:nth-of-type(2) { 
    		transform:rotateY(0deg);
    		}
    	</style>
    </head>
    
    <body>
    	<div class="pictrue-animation">
    			<div class="img-show">
    				<a href="" class="pictrue-mc">
    					<span class="xx-show">长城</span>
    					<div id="wrap">
    						<div id="box">
    							<p><img src="img/9.jpg" alt="" class="pictrue-show" /></p>
    							<p><img src="img/7.jpg" alt="" class="pictrue-show" /></p>
    						</div>
    					</div>
    				</a>
    				<span class="xx-showbz">你值得拥有！</span>
    			</div>
    			
    			<div class="img-show">
    				<a href="" class="pictrue-mc">
    					<span class="xx-show">长城</span>
    					<div id="wrap">
    						<div id="box">
    							<p><img src="img/9.jpg" alt="" class="pictrue-show" /></p>
    							<p><img src="img/7.jpg" alt="" class="pictrue-show" /></p>
    						</div>
    					</div>
    				</a>
    				<span class="xx-showbz">你值得拥有！</span>
    			</div>
    			
    		<div class="img-show">
    				<a href="" class="pictrue-mc">
    					<span class="xx-show">长城</span>
    					<div id="wrap">
    						<div id="box">
    							<p><img src="img/9.jpg" alt="" class="pictrue-show" /></p>
    							<p><img src="img/7.jpg" alt="" class="pictrue-show" /></p>
    						</div>
    					</div>
    				</a>
    				<span class="xx-showbz">你值得拥有！</span>
    			</div>
    			
    		<div class="img-show">
    				<a href="" class="pictrue-mc">
    					<span class="xx-show">长城</span>
    					<div id="wrap">
    						<div id="box">
    							<p><img src="img/9.jpg" alt="" class="pictrue-show" /></p>
    							<p><img src="img/7.jpg" alt="" class="pictrue-show" /></p>
    						</div>
    					</div>
    				</a>
    				<span class="xx-showbz">你值得拥有！</span>
    			</div>
    			
    		<div class="img-show">
    				<a href="" class="pictrue-mc">
    					<span class="xx-show">长城</span>
    					<div id="wrap">
    						<div id="box">
    							<p><img src="img/9.jpg" alt="" class="pictrue-show" /></p>
    							<p><img src="img/7.jpg" alt="" class="pictrue-show" /></p>
    						</div>
    					</div>
    				</a>
    				<span class="xx-showbz">你值得拥有！</span>
    			</div>
    			
    		<div class="img-show">
    				<a href="" class="pictrue-mc">
    					<span class="xx-show">长城</span>
    					<div id="wrap">
    						<div id="box">
    							<p><img src="img/9.jpg" alt="" class="pictrue-show" /></p>
    							<p><img src="img/7.jpg" alt="" class="pictrue-show" /></p>
    						</div>
    					</div>
    				</a>
    				<span class="xx-showbz">你值得拥有！</span>
    			</div>
    			
    		<div class="img-show">
    				<a href="" class="pictrue-mc">
    					<span class="xx-show">长城</span>
    					<div id="wrap">
    						<div id="box">
    							<p><img src="img/9.jpg" alt="" class="pictrue-show" /></p>
    							<p><img src="img/7.jpg" alt="" class="pictrue-show" /></p>
    						</div>
    					</div>
    				</a>
    				<span class="xx-showbz">你值得拥有！</span>
    			</div>
    			
    		<div class="img-show">
    				<a href="" class="pictrue-mc">
    					<span class="xx-show">长城</span>
    					<div id="wrap">
    						<div id="box">
    							<p><img src="img/9.jpg" alt="" class="pictrue-show" /></p>
    							<p><img src="img/7.jpg" alt="" class="pictrue-show" /></p>
    						</div>
    					</div>
    				</a>
    				<span class="xx-showbz">你值得拥有！</span>
    			</div>
    			
    			
    		</div>
    </body>
    </html>

2.**通用**实现图片翻转（说明：该代码来自其他大佬的博客代码，有所改编）  
*css代码*

首先，想要实现翻转效果，需要对其进行层定位，先设置一个舞台（即最外面的那个盒子），一个小盒子中放置一个图片。对最外面的盒子进行相对定位position：relative；其他盒子进行绝对定位position：absolute；  
该例子中的p元素也可置换成一个div盒子  
其次，就是我们需要将第一个图片放置最上面，另一张图片作为其反面，同时第二张图片最开始就要翻转180度，原因就是里面的正面显示的图片翻转过来之后，会将原来的图片呈现相反的效果，所以我们需要将里面的图片在显示时，就将其翻转（具体可以看代码展示效果）  
核心代码如下：  
\#box p:nth-of-type(1) \{  
transition:.8s transform;  
\}  
\#box p:nth-of-type(2) \{  
transform:rotateY(-180deg);  
transition:.8s transform;  
\}  
\#box:hover p:nth-of-type(1) \{  
transform:rotateY(180deg);  
\}  
\#box:hover p:nth-of-type(2) \{  
transform:rotateY(0deg);  
\}  
也就是将最靠近图片的那个盒子进行上述操作，nth-of-type() 应该是一个伪类元素，我也不是很了解，有兴趣的可以自己去探索，在这就不多说。  
实现扑克牌翻转，我们需要3D动画效果，并且是沿着y轴去翻转。

*html代码*

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>翻转</title>
    </head>
    <body>
    	    <div id="wrap">
                <div id="box">
                    <p><img src="../sheji/img/7.jpg" alt=""></p>
                    <p><img src="../sheji/img/9.jpg" alt=""></p>
                </div>
            </div>
    	
    </body>
    </html>

图片自己寻找，大小一样ok，在这里的图片尺寸是320\*200，  
注意，当需要多个的时候，这里用class类型选择器id选择器要好，  
因为id选择器是适合特例，特殊，优先级比class选择器要高  
但是id选择器具有唯一性，不能使用多次，如果使用多次，DW会提示有错误。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70]**心得**  
总之，在困扰了我将近一周的时间，我终于找到了适合我的这些代码，希望对你们有帮助，一起学习，共同进步！  
由于本人最近在练习如何写博客，有错误之处还请原谅。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70]: /images/20230531/669cf9505d4647909b38f69809749c3d.png