Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

Tạo menu 3D với hiệu ứng Flipping bằng CSS3

Posted by millionking on February 14, 2014

1. BƯỚC 1: HTML

Chúng ta sẽ tao ra một cấu trúc HTML bao gồm một danh sách UL-LI với các liên kết. Tuy nhiên sẽ có thêm vài phần tử SPAN để hỗ trợ hiệu ứng 3D cho menu của chúng ta. Bạn có thể tham khảo code bên dưới:

01 <ul class="block-menu">
02  <li><a href="#" class="three-d">
03   Home
04   <span aria-hidden="true" class="three-d-box">
05    <span class="front">Home</span>
06    <span class="back">Home</span>
07   </span>
08  </a></li>
09  <li><a href="#" class="three-d">
10   Demos
11   <span aria-hidden="true" class="three-d-box">
12    <span class="front">Demos</span>
13    <span class="back">Demos</span>
14   </span>
15  </a></li>
16  <!-- more items here -->
17 </ul>

Bên trong các thẻ A, sẽ được chèn vào vài phần tử SPAN để hiển thị cho mặt trước (front) và mặt sau (back) của hộp 3d khi animation. Mỗi mặt cũng cần thêm các văn bản giống thẻ A.

2. BƯỚC 2: CSS

Thực tế thì phần tử A không di chuyển, để thực hiện điều đó, chính thẻ SPAN parent mới là yếu tố quyết định.

01 /* basic menu styles */
02 .block-menu {
03   display: block;
04   width: 980px;
05   margin: 50px auto;
06   background: #000;
07      }
08
09 .block-menu li {
10  display: inline-block;
11 }
12
13 .block-menu li a {
14  color: #fff;
15  display: block;
16  text-decoration: none;
17  font-family: 'Passion One', Arial, sans-serif;
18  font-smoothing: antialiased;
19  text-transform: uppercase;
20  overflow: visible;
21  line-height: 20px;
22  font-size: 24px;
23  padding: 15px 10px;
24 }
25
26 /* animation domination */
27 .three-d {
28  perspective: 200px;
29  transition: all .07s linear;
30  position: relative;
31  cursor: pointer;
32 }
33  /* complete the animation! */
34  .three-d:hover .three-d-box,
35  .three-d:focus .three-d-box {
36   transform: translateZ(-25px) rotateX(90deg);
37  }
38
39 .three-d-box {
40  transition: all .3s ease-out;
41  transform: translatez(-25px);
42  transform-style: preserve-3d;
43  pointer-events: none;
44  position: absolute;
45  top: 0;
46  left: 0;
47  display: block;
48  width: 100%;
49  height: 100%;
50 }
51
52 /*
53  put the "front" and "back" elements into place with CSS transforms,
54  specifically translation and translatez
55 */
56 .front {
57  transform: rotatex(0deg) translatez(25px);
58 }
59
60 .back {
61  transform: rotatex(-90deg) translatez(25px);
62  color: #ffe7c4;
63 }
64
65 .front, .back {
66  display: block;
67  width: 100%;
68  height: 100%;
69  position: absolute;
70  top: 0;
71  left: 0;
72  background: black;
73  padding: 15px 10px;
74  color: white;
75  pointer-events: none;
76  box-sizing: border-box;
77 }

LƯU Ý: Một số CSS có thể cần thêm prefix.

Hiệu ứng này không có Javascript, Flash hoặc Canvas nên bạn có thể áp dụng cho menu của mình không phải lo về tốc độ.

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

Biên soạn từ: davidwalsh.name

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: