应一个朋友要求替他把原本静态页面做成翻牌的特效。
主要应用了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>