纯css3响应式3d翻转菜单

周末快乐哈,今天来看一个纯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(180deg);
}
/*
 * 响应式布局
 * 我们需要几个状态,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前端开发技术,分享网页相关资源。
---------------------------------------------------------------

纯css3响应式3d翻转菜单,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。