<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转菜单</title>
<style>
/* basic menu styles */
.block-menu {
display: block;
background: #000;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
100%;
height: 100%;
}
/*
put the "front" and "back" elements into place with CSS transforms,
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul class="block-menu">
<li><a href="/" class="three-d">
Home
<span aria-hidden="true" class="three-d-box">
<span class="front">Home</span>
<span class="back">Home</span>
</span>
</a></li>
<li><a href="/demos" class="three-d">
Demos
<span aria-hidden="true" class="three-d-box">
<span class="front">Demos</span>
<span class="back">Demos</span>
</span>
</a></li>
<li><a href="/demos" class="three-d">
菜单
<span aria-hidden="true" class="three-d-box">
<span class="front">标签</span>
<span class="back">标签</span>
</span>
</a></li>
<!-- more items here -->
</ul>
</body>
</html>