Tìm hiểu về CSS 2D transforms
TIL
607
CSS3
52
HTML5
27
White

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

Chút lý thuyết về CSS 2D transforms

CSS 2D transforms, tác dụng thì như cái tên của nó - "biến hình" cho các element theo chiều 2D (còn 3D nửa, 4D chưa biết :laughing:). Cái CSS 2D transform này cho phép chúng ta tác động lên element để có thể thay đổi vị trị, hình dáng hay xoay nó mòng mòng :v. Để làm được mấy điều đó chúng ta có một số methods như sau:

  • translate(x,y): có tác dụng là dịch chuyển vị trí của element sang trái, phải, rồi lên trên, xuống dưới với x là dịch theo chiều ngang còn y là dịch theo chiều dọc (như trục tọa độ Oxy ấy :v) đơn vị là px, em,...
  • rotate(?deg): công dụng của cái này là giúp ta xoay element với góc độ tự chọn ?deg (deg là kí kiệu của độ: degrees) và có thể xoay theo chiều kim đồng hồ (độ là số dương) hoặc ngược kim đồng hồ (độ là số âm) tùy thích.
  • scale(x,y): công dụng của nó vô cùng đơn giản là zoom, nó dùng để zoom element to lên hoặc nhỏ lại tùy chỉnh với x là zoom chiều ngang và y là zoom chiều dọc, ở đây không cần ghi đơn vị, nó tính theo tỉ lệ so với element ví dụ 1 là giữ nguyên 2 là tăng lên gấp đôi, vân vân mây mây
  • skew(x,y: công dụng của nó là là làm nghiêng cho element (lát xuống ví dụ để dễ hiểu hơn). Thực ra là có chia ra skewX()skewY nhưng chỉ cần ghi skew là có thể chỉnh được cả X và Y rồi (vậy tiện hơn).

Thực ra còn một cái matrix tuy nhiên nó cũng chỉ là tổng hợp giữa scale skewtranslate và nhìn hơi rối nên mình không nhắc (tại mình ghét nó đấy, đã ghét tuổi gì vào :angry:)

Translate

Ở đây chúng ta có một thẻ div như sau:
alt text
Và đây là kết quả của nó:
alt text
Chúng ta có một hình chữ nhật nằm ở góc trái bên trên của ảnh, bây giờ chúng ta muốn thay đổi vị trí của nó đi, ta làm như sau:
alt text
Và vị trí của nó đã bị di chuyển, cụ thể là sang phải 100px sau đó thụt xuống dưới 200px
alt text
Đó là cách hoạt độn của translate

Rotate

Tiếp tục sử dụng hình chữ nhật ở trên nhưng ta bỏ đi phần translate và thay vào đó là rotate để xem nó hoạt động như thế nào :3.
alt text
Ở đoạn CSS trên ta chọn transform:rotate(40deg) tức là ta sẽ xoay hình chữ nhật lúc nãy về phía bên phải 40 độ (nhắc lại số dương là cùng chiều kim đồng hồ còn số âm là ngược lại). Và kết quả:
alt text

Scale

Tiếp đến là scale chúng ta sẽ cho một hình chữ nhật nhỏ và dùng scale để tăng tỉ lệ nó lên
alt text
alt text
Chúng ta sẽ dùng scale và tăng tỉ lệ của hình chữ nhật lên gấp đôi:
alt text
Và kết quả là nó đã to lên gấp đôi (to lên ở đây bao gồm tất cả những thứ trong thẻ divcủa chúng ta từ font chữ, border cho đến kích thước: chiều cao, chiều rộng)
alt text

Skew

Để giải thích cho cái khái niệm về skew mà mình nêu ở trên, chúng ta có thể quan sát ví dụ để dễ hiểu hơn. Chúng ta sẽ đi vào skewXskewY sau đó thì đi đến skew cho dễ hiểu, Ví dụ ta vẫn lấy lại cái hình chữ nhật ở phần translate (mình lười trích lại code :laughing:)
alt text
Sau đó nếu ta áp dụng skewX vào:
alt text
Thì ta sẽ được như này:
alt text
Đây là cái nghiêng mà mình muốn nói. Dĩ nhiên chúng ta hoàn toàn có thể nghiêng theo hướng ngược lại bằng cách đổi độ thành số âm.
Tiếp theo, nếu ta dùng skewY thì sao?
alt text
Thì hình chữ nhật ban đầu sẽ thành ra như này:
alt text
Nó nghiêng lên trên :laughing:
Và cuối cùng là skew (lưu ý trong skew sẽ bao gồm cả skewXskewY số đầu là x số sau là y và nếu chúng ta chỉ ghi 1 số trong skew thì nó sẽ tự động hiểu số đó là x còn thằng y sẽ bị cho là 0). Chúng ta hãy thử ví dụ này lên hình chữ nhật ban đầu
alt text
Và đây là kết quả:
alt text
Nó nghiêng bốn bề :laughing:

Thêm nửa là chúng ta có thể áp dụng nhiều cái transform (như translate, skew,...) vào chung với nhau bằng cách đặt chúng cách nhau 1 khoảng trắng . Chẳng hạn như dưới đây là mình gắn cả rotate skewscale vào hình chữ nhật với chữ như sau:
alt text
áp dụng mutiple transform vào:
alt text
Ta sẽ được một hình trông vui hơn :laughing:
alt text

thoạt nhìn thì thấy mấy cái này có vẻ không vui, tuy nhiên nó cũng có thể dùng làm một số hiệu ứng khá là hay, mình sẽ viết ở bài sau, tới đây lười quá :laughing:

Link tham khảo

Nơi 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.
5 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
11 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 tháng trước
11 2
White
4 0
1. Website layouts Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần chính đáng chú ý nhất là: Header: Tiêu đ...
Tấn Huy viết 1 tháng trước
4 0
White
4 0
Ở 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 17 ngày trước
4 0
Bài viết liên quan
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
5 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á!