用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会提示有错误。心得
总之，在困扰了我将近一周的时间，我终于找到了适合我的这些代码，希望对你们有帮助，一起学习，共同进步！
由于本人最近在练习如何写博客，有错误之处还请原谅。
