首页 > 代码库 > CSS制作翻牌特效
CSS制作翻牌特效
应一个朋友要求替他把原本静态页面做成翻牌的特效。
主要应用了CSS3的transform，transiton。首先写好标签，一个ul下两个li元素，通过position的absolue设置两个li元素重合，设置z-index大小使不同呈现。然后css中设置hover事件并更改相应CSS属性。代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } ul, li { margin: 0; padding: 0; list-style: none; } .nav { transition: transform 0.6s ease-out; transition: transform .5s ease-in-out; -webkit-transition: transform .5s ease-in-out; -moz-transition: transform .5s ease-in-out; -ms-transition: transform .5s ease-in-out; -o-transition: transform .5s ease-in-out; -webkit-transform-style: preserve-3d; /*使其子类变换后得以保留 3d转换后的位置*/ -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; display: block; position: relative; } .nav:hover .list2 { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); z-index: 2; } .nav:hover .list1 { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); z-index: 1; } .nav, .list1, .list2 { width: 200px; height: 200px; } .list1, .list2{ backface-visibility: hidden; transition: 0.6s ease-out; -webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .list1 { z-index: 2; transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } .list2 { z-index: 1; transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); } </style></head><body> <ul class="nav"> <li class="list1"><img src="1.png">前面</li> <li class="list2"><img src="2.png">后面</li> </ul></body></html>
CSS制作翻牌特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。