html翻转效果怎么实现
导读:收集整理的这篇文章主要介绍了html翻转效果怎么实现,觉得挺不错的,现在分享给大家,也给大家做个参考。htML翻转效果的实现方法:首先将两个要展示的图片利用定位重叠在一起;然后利用CSS3的PErspective结合“transform:r...
收集整理的这篇文章主要介绍了html翻转效果怎么实现,觉得挺不错的,现在分享给大家,也给大家做个参考。htML翻转效果的实现方法:首先将两个要展示的图片利用定位重叠在一起;然后利用CSS3的PErspective结合“transform:ratateY()”属性实现翻转效果即可。@H_126_2@
本文操作环境:windows7系统、HTML5& & CSS3版、Dell G3电脑。
CSS3实现漂亮的卡片翻转效果
先贴效果图(实际效果比gif图流畅1000倍,放心使用):
主要利用的CSS3的
perspective
结合transform:ratateY()
属性完成。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。需要注意的是:perspective 属性只影响 3D 转换元素。 这个属性现在在火狐谷歌safari上都得到了较好的支持,W3C.cn上关于该属性的说明还未及时更新。
实现思路就是将两个要展示的p利用定位重叠在一起,其中一个首先围绕Y轴旋转一定角度,还要加上一个关键属性backface-visibilITy:hidden
(该属性定义当元素不面向屏幕时是否可见)。如果不加上这个属性的话,那么就会始终只能看到一张卡片了,失败的效果如下:
下面就贴完整的代码:
!DOCTYPE html> html> head> meta charset="utf-8"> meta http-equiv="Content-type" content="text/html"> meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> title> CSS3实现卡片翻转效果/title> style> .re-item { width: 220px; margin: 50px auto; height: 276px; cursor: pointer; position: relative; perspective: 500; -webkit-perspective: 500; } .re-item img { max-width: 220px; } .re-item-front, .re-item-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; -webkit-perspective: 1000; /*backface-visibility: hidden; */ -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px; overflow: hidden; } .re-item-back { position: relative; transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); } .re-item:hover .re-item-front { transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); } .re-item:hover .re-item-back { transform: rotateY(-360deg); -webkit-transform: rotateY(-360deg); } .re-box .re-item dd { text-align: center; font-family: "微软雅黑"; } .re-item .re-item-job { margin: 2px 0; font-Size: 18px; color: #303030; line-height: 40px; } .re-item .re-item-des { padding: 0 12px; font-size: 14px; color: #939393; } /style> /head> body> div class="re-box"> div class="re-item"> dl class="re-item-front"> dt> img src="img/c2.jpg" / alt="coser"> /dt> dd class="re-item-job"> coser/dd> dd class="re-item-des"> 成为我们的合作coser,漫展返图,自由扩列,以及无偿拍摄& 后期服务/dd> /dl> div class="re-item-back"> img src="img/c2_1.jpg" alt="苏苏" /> button type="button" class="join_BTn open_modal" data-id="2"> 立即加入/button> /div> /div> /div> /body> /html>
好好看看html结构,很多都是不需要的,最关键的结构如下,css你也看着删除一下吧。
p class="re-item"> p class="re-item-front"> /p> p class="re-item-back"> /p> /p>
我的实现代码即是如此,直接贴出来因为懒得删。
【推荐学习:html视频教程】
以上就是html翻转效果怎么实现的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html翻转效果怎么实现
本文地址: https://pptw.com/jishu/591339.html