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

2024-07-01 16:14| 来源: 网络整理| 查看: 265

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

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

无标题文档 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); } 长城

你值得拥有！长城

你值得拥有！

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

#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); }

首先，想要实现翻转效果，需要对其进行层定位，先设置一个舞台（即最外面的那个盒子），一个小盒子中放置一个图片。对最外面的盒子进行相对定位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代码* 翻转

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

【本文地址】

公司简介

联系我们