<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
margin: 30px 40px;
}
li {
width: 190px;
height: 50px;
list-style: none;
float: left;
border: 1px solid #ccc;
position: relative;
/*perspective: 900px;*/
transform-style: preserve-3d;
}
.blackdiv {
width: 100%;
height: 100%;
background-color: #000000;
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 0%;
transform: rotateX(90deg) translateZ(25px);
transition: transform 0.4s;
}
li:hover .blackdiv {
transform: rotateX(0deg);
}
li:hover .whitediv {
transform: rotateX(90deg);
}
.whitediv {
width: 100%;
height: 100%;
background-color: #FFFFFF;
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 100%;
transform: rotateX(0deg) translateZ(22px);
transition: transform 0.4s;
}
.blackdiv a{
text-decoration:none;
font-size: 14px;
color: #FFFFFF;
line-height: 40px;
margin-left: 10px;
font-weight: bolder;
}
.whitediv a{
text-decoration:none;
font-size: 14px;
color: #000000;
margin-left: 10px;
line-height: 40px;
font-weight: bolder;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<div class="blackdiv"><a href="tool.html">TOOL</a></div>
<div class="whitediv"><a href="tool.html">TOOL</a></div>
</li>
<li>
<div class="blackdiv"><a href="work.html">WORK</a></div>
<div class="whitediv"><a href="work.html">WORK</a></div>
</li>
<li>
<div class="blackdiv"><a href="vr-360.html">VR/360</a></div>
<div class="whitediv"><a href="vr-360.html">VR/360</a></div>
</li>
<li>
<div class="blackdiv"><a href="DIRECTORS.html">DIRECTORS</a></div>
<div class="whitediv"><a href="DIRECTORS.html">DIRECTORS</a></div>
</li>
<li>
<div class="blackdiv"><a href="AWARDS.html">AWARDS</a></div>
<div class="whitediv"><a href="AWARDS.html">AWARDS</a></div>
</li>
<li>
<div class="blackdiv"><a href="ABOUT.html">ABOUT</a></div>
<div class="whitediv"><a href="ABOUT.html">ABOUT</a></div>
</li>
<li>
<div class="blackdiv"><a href="CONTACT.html">CONTACT</a></div>
<div class="whitediv"><a href="CONTACT.html">CONTACT</a></div>
</li>
</ul>
</body>
</html>
导航栏翻转效果
最新推荐文章于 2023-02-22 15:10:36 发布