纯css3响应式3d翻转菜单

悠悠 2022-08-26 15:20 165阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单，3d响应式菜单，希望对大家有所帮助。

![SouthEast][]

[在线欣赏][Link 1]效果，[在线编辑][Link 2]代码，或者[下载收藏][Link 3]。

html文件如下

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

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

![SouthEast 1][]

/*
     * 简单粗暴的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][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[SouthEast]: /images/20220824/83d1411ff3f84690944b465c0249209d.png
[Link 1]: http://gx.zptc.cn/whqet/3dmenu.html
[Link 2]: http://codepen.io/whqet/pen/zpxLq
[Link 3]: http://codepen.io/whqet/share/zip/zpxLq/
[SouthEast 1]: /images/20220824/fad400c3e91e4a7793c5f3f78fac0db4.png
[whqet]: http://blog.csdn.net/whqet