CSS3实现翻转菜单效果

最新推荐文章于 2025-07-17 16:44:10 发布

kaitaow

最新推荐文章于 2025-07-17 16:44:10 发布

阅读量562

点赞数

CC 4.0 BY-SA版权

文章标签：翻转菜单

本文链接：https://blog.youkuaiyun.com/foreverkoking/article/details/9745785

本文展示了一个使用CSS实现的HTML元素翻转效果，适用于多种浏览器，推荐在Firefox中查看最佳效果。

演示地址

点击打开链接

注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用FireFox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>

 <style type = "text/css" >
/ * < ![CDATA[* /
 ul .flipboard
 {
 margin: 0 ;
 padding: 0 ;
 list-style:none;
 perspective:10000px;
 }
 ul .flipboard li
 {
 display:inline-block;
 width :80px;
 height :80px;
 margin-right:10px;
 background :white;
 font :bold 36px Arial;
 text-transform:uppercase;
 text-align: center ;
 cursor:pointer;
 }
 ul .flipboard li a
 {
 display:block;
 width : 100 %;
 height : 100 %;
 color :black;
 text-decoration:none;
 outline:none;
 transitional:all 300ms ease-out 0 .1s;
 }
 ul .flipboard li a span
 {
 box-sizeing:border-box;
 padding-top:15px;
 display:block;
 width : 100 %;
 height : 100 %;
 transition:all 300ms ease-out 0 .1s;
 }
 ul .flipboard li :hover a
 {
 transform:rotate(180deg);
 background :#cef1ff;
 border-radius:7px;
 box_shadow: 0 0 5px #eee inset;
 }
 ul .flipboard li :hover a span
 {
 transform:rotateY(180deg);
 }
 / *]] > * /
 </style>

 <title></title>
</head>

<body>
 <ul class = "flipboard" >
 <li><a href = "#" > k </a></li>

 <li><a href = "#" > o </a></li>

 <li><a href = "#" > k </a></li>

 <li><a href = "#" > i </a></li>

 <li><a href = "#" > n </a></li>

 <li><a href = "#" > g </a></li>
 </ul>
</body>
</html>