Tạo 3D Flipping Menu Với CSS3

Trong những ngày cuối năm chuẩn bị đón chào năm mới, chắc hẳn là các bạn bây giờ rất bận rộn dọn dẹp nhà cửa và gặp gỡ bạn bè của mình. Nhưng các bạn cũng đừng quên dành chút thời gian để học tập nhé. Hôm nay, mình sẽ giới thiệu cho các bạn một menu với hiệu ứng 3D được làm hoàn toàn từ CSS3.

Xem Demo | Download

HTML

Đầu tiên, chúng ta sẽ dựng khung chuẩn html cho menu như sau :

<ul class="block-menu">
		<li><a href="/" class="three-d">
			Home
			<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
		</a></li>
		<li><a href="/demos" class="three-d">
			Demos
			<span class="three-d-box"><span class="front">Demos</span><span class="back">Demos</span></span>
		</a></li>
		<li><a href="/deals" class="three-d">
			Deals
			<span class="three-d-box"><span class="front">Deals</span><span class="back">Deals</span></span>
		</a></li>
		<li><a href="/about" class="three-d">
			About
			<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
		</a></li>
</ul>

CSS

Đầu tiên, chúng ta sẽ định dạng css cho menu như sau :

/* basic menu styles */
.block-menu {
	display: block;
	background: #000;
}

.block-menu li {
	display: inline-block;
}

.block-menu li a {
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	overflow: visible;
	line-height: 20px;
	font-size: 24px;
	padding: 15px 10px;
}

Sau đó là hiệu ứng 3D cho menu như sau :

/* animation domination */
.three-d {
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;
}
	/* complete the animation! */
	.three-d:hover .three-d-box,
	.three-d:focus .three-d-box {
		transform: translateZ(-25px) rotateX(90deg);
	}

.three-d-box {
	transition: all .3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	awidth: 100%;
	height: 100%;
}

/*
	put the "front" and "back" elements into place with CSS transforms,
	specifically translation and translatez
*/
.front {
	transform: rotatex(0deg) translatez(25px);
}

.back {
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;
}

.front, .back {
	display: block;
	awidth: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;
}

Mình hy vọng là những bài viết ngắn ngủi cuối năm này sẽ giúp các bạn có thêm lựa chọn cho những mẫu thiết kế web của mình trong năm mới.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster