純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前端開發技術。分享網頁相關資源。

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