一、效果图
二、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3之翻转导航栏</title>
<style>
*{margin: 0; padding: 0;}
*::before, *::after {
box-sizing: border-box;
}
body {
text-align: center;
}
nav {
display: inline-block;
margin-top: 100px;
}
nav a {
display: inline-block;
color: #fff;
text-decoration: none;
perspective: 200px;
}
nav a span {
display: inline-block;
line-height: 40px;
width: 100px;
background-color: #67d2fe;
paddin: 0 25px;
position: relative;
transition: all 1s;
transform-origin: top;
transform-style: preserve-3d;
}
nav a span::after {
position: absolute;
background-color: #d7affe;
content: attr(data-hover); /* attribute 自定义属性 的值*/
width: 100%;
height: 100%;
top: 100%;
left: 0;
transform: rotateX(-90deg); /* 往下翻转 是 负值 */
transform-origin: top;
}
nav a:hover span {
transform: rotateX(90deg) translateY(-20px); /*往上翻转是正值 第二个是向上移动20px*/
}
</style>
</head>
<body>
<nav>
<a href="#">
<span data-hover="商品详情">导航栏</span>
</a>
<a href="#">
<span data-hover="商品详情">导航栏</span>
</a>
<a href="#">
<span data-hover="商品详情">导航栏</span>
</a>
<a href="#">
<span data-hover="商品详情">导航栏</span>
</a>
<a href="#">
<span data-hover="商品详情">导航栏</span>
</a>
<a href="#">
<span data-hover="商品详情">导航栏</span>
</a>
<a href="#">
<span data-hover="商品详情">导航栏</span>
</a>
<a href="#">
<span data-hover="商品详情">导航栏</span>
</a>
</nav>
</body>
</html>
