<!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; width: 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; width: 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>