3D旋转导航
具体效果如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul {margin: 0;padding: 0;list-style: none;}.navs {width: 300px;height: 40px;margin: 50px auto;}.navs li {position: relative;float: left;width: 100px;height: 40px;line-height: 40px;transition: all .5s;transform-style: preserve-3d;/* transform: rotateX(-20deg) rotateY(30deg);*/}.navs li a {position: absolute;left: 0;top:0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.navs li a:first-child {background-color: green;transform: translateZ(20px);}.navs li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}.navs li:hover {transform: rotateX(-90deg);}</style>
</head>
<body>
<div class="navs"><ul><li><a>首页</a><a>home</a></li><li><a>登录</a><a>login</a></li><li><a>注册</a><a>register</a></li></ul>
</div>
</body>
</html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！