Hiệu ứng xoay 360 độ bằng CSS3 Animation

Hiệu ứng xoay 360 độ là một hiệu ứng hoạt hình khá đơn giản để thu hút người xem. Đây là một hiệu ứng rất dễ thực hiện, MyLớp.edu.vn sẽ hướng dẫn những bạn nào mới tìm hiểu về CSS3 cách tạo ra hiệu ứng này nhé.

Hiệu ứng xoay 360 độ bằng CSS3 Animation

Xoay đối tượng   Download Files

Xoay toàn trang   Download Files

Bước 1) Tạo class .rotate360 trong CSS:

CSS Code:
1
2
3
4
5
6
7
@keyframes rotate360 {
	100% { transform: rotate(360deg); }
}
.rotate360 {
	animation-name: rotate360;
	animation-duration: 2s; /* Thời gian xoay */
}

Để tương thích với Google Chrome và các trình duyệt khác, bạn cần thêm vào các tiền tố tương ứng. Và đoạn code CSS có thể sẽ dài như thế này:

CSS Code:
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
@-webkit-keyframes rotate360 {
	100% { -webkit-transform: rotate(360deg); }
}
 
@-moz-keyframes rotate360 {
	100% { -moz-transform: rotate(360deg); }
}
 
@-ms-keyframes rotate360 {
	100% { -ms-transform: rotate(360deg); }
}
 
@-o-keyframes rotate360 {
	100% { -o-transform: rotate(360deg); }
}
 
@keyframes rotate360 {
	100% { transform: rotate(360deg); }
}
 
.rotate360 {
	-webkit-animation-name: rotate360;
	-moz-animation-name: rotate360;
	-ms-animation-name: rotate360;
	-o-animation-name: rotate360;
	animation-name: rotate360;
 
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
}

Class .rotate360 có thể viết gọn lại thế này:

CSS Code:
1
2
3
4
5
6
7
.rotate360 {
	-webkit-animation: rotate360 2s;
	-moz-animation: rotate360 2s;
	-ms-animation: rotate360 2s;
	-o-animation: rotate360 2s;
	animation: rotate360 2s;
}

Bước 2) Áp dụng hiệu ứng xoay 360 độ vào các phần tử trong HTML.

Vì chúng ta đã xây dựng class .rotate360 ở bước trên, mà class thì có thể chèn vào bất kỳ đâu trong HTML, nên bạn có thể áp dụng hiệu ứng xoay 360 độ vào bất kỳ phần tử nào trong trang web.

Cách làm đơn giản như sau:

HTML Code:
1
<element class="rotate360">...</elemnet>

Với <element> là tên của một thẻ nào đó mà bạn muốn áp dụng, VD <div>, <p>, <img>,…

Để áp dụng hiệu ứng xoay 360 độ cho toàn bộ trang web, hãy áp dụng class .rotate360 cho thẻ <body>:

HTML Code:
1
<body class="rotate360">...</body>

Từ hiệu ứng này, bạn có thể tự tạo cho mình nhiều hiệu ứng khác nhau, VD hiệu ứng FadeIn chẳng hạn, tất cả phụ thuộc vào khả năng sáng tạo của bạn!

Hiệu ứng fadeIn   Download Files

CSS Code:
1
2
3
4
5
6
7
8
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.fadeIn {
	-webkit-animation: fadeIn 4s ease-out;
	animation: fadeIn 4s ease-out;
}
HTML Code:
1
<body class="fadeIn">...</body>

Để tìm hiểu kỹ hơn về CSS3 Animation, bạn tham khảo thêm tại W3Schools.

Nếu bạn ngại code CSS, hãy sử dụng Animate.css, một file css tuyệt vời của Daniel Eden, có rất nhiều hiệu ứng CSS3 đẹp mắt, hấp dẫn được sử dụng trong rất nhiều các trang web khác nhau.

Trên đây là bài hướng dẫn tạo hiệu ứng xoay 360 độ hết sức cơ bản, đơn giản và dễ làm theo, dành cho những bạn mới tìm hiểu về hoạt hình trong CSS3. Chúc bạn thành công!

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
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.

Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website