Hiệu ứng "sinh động" cùng CSS 2D transforms
TIL
720
CSS3
49
White

Tấn Huy viết ngày 04/08/2018

Animation cùng CSS 2D transforms

Ở bài viết cũ mình đã chia sẽ về các methods để biến đổi một element như translate, rotate,... (Ở đây nè). Trong bài viết đó thì trông mấy cái đó chả có gì thú vị ngoài việc làm cho element trở nên dị dạng :sleeping:. Cho nên trong bài này chúng ta sẽ vận dụng một số thứ đã có trước đó của CSS kết hợp với mấy cái transform này, xem nó thú vị tới đâu :laughing:.

Phù phép cho translate(), rotate(), skew() và scale()

Ở bài cũ mình cũng đã có đưa các vị dụ về sự chuyển đổi của các methods ở trên, nhưng chỉ nhìn hình ảnh của element sau khi bị chúng nó làm biến dạng thì cũng không thú vị lắm, vậy nếu chúng ta cho nó một tí chuyển động thì có vẻ hay hơn :3.

Trước hết để chúng ta sẽ dùng HTML tạo 4 box kế tiếp nhau tượng trưng cho 4 cái methods kia (đặt cạnh nhau sẽ dễ quan sát hơn)
alt text
Và tinh chỉnh một tí CSS để 4 cái box trông dễ nhìn hơn
alt text
Ở đây 4 box mình đều viết CSS cho nó như nhau chỉ khác ở chỗ đổi màu thôi cho nên mình chỉ đưa ra phần .showcase với box1 làm mẫu thôi :3. 4 cái box của chúng ta đây:
alt text

Tiếp theo là phần quan trọng, chúng ta sẽ dùng :hover cùng với transition (transition này sẽ có bài giải thích sau, giờ chỉ cần biết nó làm mọi việc diễn ra mượt mà và chậm rãi hơn là được :laughing:) Để tạo animation cho các box mỗi khi ta trỏ chuột vào như sau:
alt text
Có một điều lưu ý là, để có thể có thể show transform được trên tất cả các trình duyệt thì chúng ta cần phải thêm 1 dòng dành riêng cho trình duyệt đó. Thay vì chỉ ghi một dòng là transform:rotate(30deg) (dòng này là standard syntax có thể chrome hiểu được nhưng các trình duyệt khác lại không hiểu được nên transform của chúng ta sẽ không thực hiện được). Chúng ta cần viết thêm các dòng như sau:

  • Thêm -webkit-phía trước transform -webkit-transform:rotate(30deg) dành cho trình duyệt Safari
  • Thêm -ms-phía trước transform -ms-transform:rotate(30deg) dành cho trình duyệt IE 9 (Internet Explorer)
  • Thêm -moz-phía trước transform -moz-transform:rotate(30deg) dành cho trình duyệt con cáo lửa (Firefox :laughing:)
  • Thêm -o-phía trước transform -o-transform:rotate(30deg) dành cho trình duyệt Opera

Ở các hình có code CSS minh họa mình sẽ không ghi vào để cho việc trích dẫn hình không bị quá dài, mình sẽ ghi nó đầy đủ vào phần code của Codepen nhé. Và đây là kết quả của chúng ta (rê chuột vào mỗi box để xem sau khi được phù phép thì chúng nó trông như nào)

See the Pen


Trông hiệu ứng phết rồi ấy nhỉ :laughing:. Giờ cùng thử thêm một hiệu ứng nửa để cho đã mắt :laughing:
Chúng ta sẽ lấy lại cái box1 kia và tạo hiệu ứng khác cho nó :3. Lần này chúng ta sẽ không chỉ "biến hình" nó mà sẽ cộng thêm tí hiệu ứng khác như chuyển màu background, border,...Chúng ta sẽ viết lại CSS cho box1 như sau:
alt text
Cụ thể ở đây là sau khi chúng ta trỏ chuột vào box1 thì nó sẽ được zoom to lên nhờ scale, sẽ có thêm màu background và border của nó sẽ bị bẻ cong đi đôi chút :laughing:

See the Pen

Multiple transforms

Qua phần vận dụng transform ở trên chúng ta đã bắt đầu thấy nó cũng có thể làm ra được những thứ hay ho và lạ mắt chỉ với HTML và CSS rồi đúng không :laughing:. Như đã nói ở bài trước chúng ta còn có thể vận dụng nhiều cái transform cùng một lúc, vậy thử làm xem nó có hay hơn không :v.

Tiếp tục lấy box1 ở trên để làm chuột thí nghiệm (quá lười để tạo cái mới :laughing:). Tuy nhiên lần này chúng ta sẽ áp dụng 2 cái transform vào nó là rotate với mục đích là quay nó mòng mòng và kết hợp với scale để vừa quay vừa to lên :v. Ta có đoạn CSS như sau:
alt text
Lần này cái box1 này sẽ được quay 360 độ cùng với việc được nhân 2 kich cỡ :v (mình có chỉnh transition lên 1.5s thay vì 1s để quay lâu hơn, xem đã hơn)

See the Pen

Hoặc chúng ta có thể làm thêm một ví dụ khác sinh động hơn. Trỏ chuột vào background màu xám để thấy sự kì diệu :laughing: (các bạn xem code trong Codepen luôn nhé)

See the Pen

Ở ví dụ trên Nhìn hay hay đúng không nào :laughing:. Và có rất nhiều các hiệu ứng hay khác mà mình chưa nêu được ở đây (một phần là mình lười, phần lớn hơn là mình nghĩ méo ra đó :v). Dựa trên mấy cái cơ bản ở 2 bài CSS 2D transform chúng ta còn có thể làm ra được nhiều cái hay hơn nửa :laughing:. Các bạn có thể tham khảo link ở dưới hoặc tự chế thêm :laughing:.

Link tham khảo

Mình tham khảo ở:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
19 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
12 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 1 năm trước
12 2
White
8 1
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 1 năm trước
8 1
White
7 0
Sau khi đã tìm hiể về Grid ở hai phần trước về các property thông dụng của grid ((Link), (Link)) thì chúng ta cũng đã thấy grid rất hữu dụng vì tha...
Tấn Huy viết 1 năm trước
7 0
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 7 tháng trước
2 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
19 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!