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

用css实现扑克牌，图片的翻转效果相关推荐

php图片滑动的属性,使用css怎么实现图片的滑动效果？（示例）
本篇文章主要给大家介绍关于css实现图片的滑动效果示例,希望大家阅读完本篇后对css滑动效果的相关知识有所了解. 下面给大家举一个简单的css图片滑动效果示例(自下而上滑动): css怎么实现图片滑动 ...
HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
css鼠标悬停图片剪辑路径效果
下载地址一款css鼠标悬停图片剪辑路径效果,当鼠标悬停在图片上时,图片按一定路径放大的动画特效,生动形象,让图片灵活起来. dd:
css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
图片3D翻转效果 --摘自李硕老师博客160305
原文地址:http://blog.csdn.net/u012215170/article/details/50421023 ndroid手机上有众多的炫酷的设计风格,动画必然是APP的一大亮点,所以一 ...
html3d上下翻转4面效果,花式实现图片3D翻转效果
闲话曾经在闲逛时,看到有一个很炫的3D翻转切换图片的效果.地址在这里:https://tympanus.net/Development/Slicebox/index.html 一直想搞一个,最近撸出 ...
css背景图毛玻璃,css实现背景图片的毛玻璃效果
问题一css 一.简述问题html 最近在作登陆页面的时候,遇到了一个问题:将登陆页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料.web 二.问题解决svg .blur { filte ...

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

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

用css实现扑克牌，图片的翻转效果相关推荐

最新文章

热门文章