Animation là một kỹ thuật hoạt hình rất hấp dẫn và mạnh mẽ của CSS3. Bài hướng dẫn hôm nay của MyLớp.edu.vn sẽ giúp bạn tạo ra một hoạt hình khá bắt mắt, đó là hiệu ứng lật 3D, được sử dụng khá nhiều trong các trang web. Hiệu ứng này sử dụng các thuộc tính perspective, transform, transition và các hàm rotateX(), rotateY() của CSS3.

Create a CSS Flipping Animation – Tạo hiệu ứng lật 3D bằng CSS3

CSS Flipping Animation – Tạo hiệu ứng lật bằng CSS (Ảnh minh họa)

Cấp độ: Trung bình

Yêu cầu:
– Thành thạo CSS, CSS3
– Có hiểu biết về CSS3 Transition, CSS3 3D Transform

View Clean Version Demo   Download Clean Version Files

View Full Version Demo   Download Full Version Files

Bước 1: Tạo phần tử hiển thị trong HTML

1
2
3
4
5
6
7
8
9
10
11
12

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content -->
			Front (Mặt trước)
		</div>
		<div class="back">
			<!-- back content -->
			Back (Mặt sau)
		</div>
	</div>
</div>

Có 2 phần tử để chứa nội dung, “front” và “back”, dùng làm mặt trước và mặt sau. Bạn có thể để bất kỳ nội dung nào vào 2 phần tử này, ví dụ như là các bức ảnh chẳng hạn.

Lưu ý là thuộc tính ontouchstart cho phép người dùng màn hình cảm ứng có thể trượt qua lại để xem hiệu ứng. classList, toggle là các đối tượng, phương thức mới của JavaScript được dùng trong HTML5 mà không cần phải sử dụng thêm thư viện ngoài như jQuery chẳng hạn. Mấy lệnh này dùng để bật / tắt class .hover cho phần tử .flip-container phía ngoài cùng.

Bước 2: Tạo hoạt hình bằng CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}
 
/* Kích thước các mặt */
.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}
 
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
 
	position: relative;
}
 
/* hide back of pane during swap - Ẩn các mặt sau (back face) khi hoán chuyển các mặt */
.front, .back {
	backface-visibility: hidden;
 
	position: absolute;
	top: 0;
	left: 0;
}
 
/* front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}
 
/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

Lưu ý: Để đơn giản, đoạn code CSS phía trên sử dụng các thuộc tính chuẩn perspective, transform, transition. Trong thực tế, đây là các thuộc tính mới của CSS3, nên để có thể hoạt động được trên tất cả các trình duyệt như Chrome, Safari, Opera… bạn cần thêm các tiền tố -webkit-, -o-,… đằng trước các thuộc tính này.

Lưu ý: Thuộc tính perspective:1000; (phối cảnh) của phần tử ngoài cùng .flip-container giúp ta có thể thực hiện các phép biến hình 3D cho các phần tử con, cháu của nó, như .front, .back, chứ không phải chính nó!

Để hiểu bài này một cách thấu đáo, bạn cần hiểu rõ về kỹ thuật 3D Transforms của CSS3 sử dụng các thuộc tính như perspective, transform, transform-origin… cũng như các hàm rotateX(), rotateY()…

Để tạo được hiệu ứng lật ngang, ta xoay phần tử một góc 180 độ quanh trục X của phần tử ấy bằng lệnh rotateX(180deg), tương tự, để tạo hiệu ứng lật dọc, ta xoay phần tử một góc 180 độ quanh trục Y của phần tử ấy bằng lệnh rotateY(180deg); Các trục xoay, tâm xoay này dựa vào thuộc tính transform-origin, có giá trị (x, y) mặc định là (50%, 50%), tức là ở giữa phần tử.

Cuối cùng, để tương thích trọn vẹn với tất cả các trình duyệt, nhất là IE, các đoạn code CSS phía trên sẽ phải sửa khá phức tạp, rối rắm, MyLớp.edu.vn không trình bày ra đây mà để vào phần ví dụ, các bạn có thể xem và tải về trong link dưới đây.

View Full Version Demo   Download Full Version Files

Theo: David Walsh

Cheers,

The following two tabs change content below.

• Bio
• Latest Posts

Lục Đức Thành

Giáo viên at FPT Arena

Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Latest posts by Lục Đức Thành (see all)

• Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
• Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
• WordPress 5 có gì mới? - 23/12/2018
• Sublime Text 3 Portable Windows 64 bit - 11/12/2017
• Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017