本文介绍了一种使用HTML和CSS实现的3D翻转菜单效果。通过设置相对定位和绝对定位，结合:hover伪类和transform属性，实现了当鼠标悬停在菜单项上时，菜单项会呈现出3D翻转的视觉效果。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：dw
作者：张海锋
撰写时间：2019-01-27
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
html代码：
<body>
<div>
<ul class="nav">
<li><a href="#" class="con"> one <span class="con-box"><span class="cont">one</span><span class="back">one</span>
</span> </a></li>
<li><a href="#" class="con"> two <span class="con-box"><span class="cont">two</span><span class="back">two</span></span> </a></li>
<li><a href="#" class="con"> tree <span class="con-box"><span class="cont">tree</span><span class="back">tree</span></span> </a></li>
<li><a href="#" class="con"> free <span class="con-box"><span class="cont">free</span><span class="back">free</span></span> </a></li>
<li><a href="#" class="con"> five <span class="con-box"><span class="cont">five</span><span class="back">five</span></span> </a></li>
</ul>
</div>
</body>
css样式代码：
.con {
position: relative;
}
.nav > li {
display: inline;
float:left;
}
.nav li a {
color: #fff;
display: block;
line-height: 20px;
padding: 15px 30px 15px 31px;
}
.con:hover {
cursor: pointer;
}
.con:hover .con-box{
transform: translateZ(-25px) rotateX(90deg);
}
.con-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.cont {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
}
.cont, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #74adaa;
padding: 15px 30px 15px 31px;
color: white;
box-sizing: border-box;
}
.nav li a:hover .cont,
.nav li a:hover .back {
background-color: #51938f;
}
效果实现如下：
鼠标移上去就会有3d旋转效果。。。
扫一扫
1886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
