<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>20160122</title> <style> .nav{ margin: 0; padding: 50px; } .nav li{ float: left; list-style: none; padding: 0 15px; -webkit-perspective:100px; } .nav a{ float: left; position: relative; font:14px/20px "宋体"; text-decoration: none; -webkit-transform-style:preserve-3d; transition:.5s; -webkit-transform-origin:center center -10px; } .nav span{ float: left; width: 60px; text-align: center; -webkit-backface-visibility:hidden; } .nav span:nth-of-type(2){ position: absolute; left:0; top:-20px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg); } .nav a:hover{ -webkit-transform:rotateX(-90deg); } </style> </head> <body> <ul class="nav"> <li> <a href="#"> <span>选项一</span> <span>选项1</span> </a> </li> <li> <a href="#"> <span>选项二</span> <span>选项2</span> </a> </li> <li> <a href="#"> <span>选项三</span> <span>选项3</span> </a> </li> </ul> <script type="text/javascript"> </script> </body> </html>