纯css3响应式3d翻转菜单

前端开发whqet,csdn,王海庆,whqet,前端开发专家周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单。3d响应式菜单，希望对大家有所帮助。



在线赞赏效果。在线编辑代码，或者下载收藏。

html文件例如以下

<ul class="menu">
<li><a title="站点首页" href="#">站点首页</a>
</li>
<li><a title="行业洞察" href="#">行业洞察</a>
</li>
<li><a class="cur" title="解决方式" href="#">解决方式</a>
</li>
<li><a title="产品商场" href="#">产品商场</a>
</li>
<li><a title="技术支持" href="#">技术支持</a>
</li>
<li><a title="媒体中心" href="#">媒体中心</a>
</li>
<li><a title="增加我们" href="#">增加我们</a>
</li>
<li><a title="关于我们" href="#">关于我们</a>
</li>
</ul>

然后是css，在codepen里我使用了css reset和prefix-free。在线案例里。使用了简单粗暴的重置，大家见谅。

在整个案例中。3d翻转的核心在于两点。一是3d盒子的绘制，我们利用:before，:after两个伪对象各做一个面。然后X轴负旋转形成盒子；二是hover翻转的实现。hover之后对整个盒子作翻转（X轴正旋转）。实现原理例如以下图所看到的。

/*
* 简单粗暴的CSS重置
* */
*, *:before, *:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
* 菜单设置。宽、高、位置、阴影
* */
.menu {
list-style: none;
width: 960px;
height: 40px;
margin: 50px auto;
box-shadow: 0 0 4px rgba(0, 0, 0, .5);
}
/*
* 菜单项设置
* fll，li脱离标准流。形成水平菜单
* */
.menu li {
float: left;
}
/*
* 菜单项链接设置，关键设置，菜单的主要表现体如今这里
* 设置宽、高、背景色、文字大小、文字颜色、文字居中、文字装饰、边框
* transition过渡
* 3d transform属性，transform-style、transform-origin
* 部分代码写到了组合选择器里
* */
.menu li a {
display: inline-block;
color: #666;
background-color: #eee;
text-decoration: none;
position: relative;
}
/*
* before和after伪类形成两个面。我们须要给他们不同的颜色、背景色。不同的旋转角度
* */
.menu li a::before {
content: attr(title);
color: #888;
background-color: #aaa;
position: absolute;
left: 0;
top: 0;
transform: rotateX(-90deg);
}
.menu li a::after {
content: attr(title);
color: #fff;
background-color: #666;
position: absolute;
left: 0;
top: 0;
transform: rotateX(-180deg);
}
.menu li a, .menu li a::before, .menu li a::after {
width: 120px;
height: 40px;
text-align: center;
font-size: 14px;
line-height: 40px;
border: 1px solid #ddd;
border-width: 0 1px 0 0;
transition: all 1s;
transform-style: preserve-3d;
transform-origin: center center -20px;
}
/*
* hover之后表现
* */
.menu li:hover a, .menu li a.cur {
transform: rotateX(178deg);
}
/*
* 响应式布局
* 我们须要几个状态，900+，768-900。480-768,320-480,320-
* 不同状态下，我们主要实现菜单项的不同宽度
* 768-900，整个菜单铺满屏幕，1行8列
* */
@media (max-width: 900px) {
.menu {
width: 100%;
height: 40px;
}
.menu li {
width: 12.5%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
}
}
/*
* 响应式布局
* 480-768，整个菜单铺满屏幕，2行4列
* */
@media (max-width: 768px) {
.menu {
width: 100%;
height: 80px;
}
.menu li {
width: 25%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 1px 1px 0;
}
}
/*
* 响应式布局
* 320-480，整个菜单铺满屏幕，4行2列
* */
@media (max-width: 480px) {
.menu {
width: 100%;
height: 160px;
}
.menu li {
width: 50%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 1px 1px 0;
}
}
/*
* 响应式布局
* 320-，整个菜单铺满屏幕，8行1列
* */
@media (max-width: 320px) {
.menu {
width: 100%;
height: 320px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 0 1px 0;
}
}

That's it, Thank you.

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术。分享网页相关资源。

---------------------------------------------------------------