用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代码
<style>
#wrap {
width: 320px;
height: 200px;
margin: 0 auto;
position: relative;
perspective:800px;
}
#box {
position: absolute;
left: 0px;
width: 320px;
height: 200px;
transform-style:preserve-3d;
}
#box p {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: -30px;
font-size: 28px;
backface-visibility: hidden;
color: #fff;}
#box p img {
width: 320px;
height: 200px;
}
#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>
首先，想要实现翻转效果，需要对其进行层定位，先设置一个舞台（即最外面的那个盒子），一个小盒子中放置一个图片。对最外面的盒子进行相对定位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会提示有错误。
心得
总之，在困扰了我将近一周的时间，我终于找到了适合我的这些代码，希望对你们有帮助，一起学习，共同进步！
由于本人最近在练习如何写博客，有错误之处还请原谅。
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
