Tìm hiểu về transform: matrix trong css

Vì sao viết bài viết này

Lấy cảm hứng tử series bài giảng về đại số tuyến tính "Essence of linear algebra" của 3Blue1Brown. Cụ thể là bài giảng về linear transformation hay biến đổi tuyến tính nếu bạn nào chưa rõ có thể xem qua video bài giảng ở 3BLUE1BROWN SERIES Phần 1 • Tập 3.

Sơ lược về linear transformation (biến đổi tuyến tính)

‌Có thể hiểu đơn giản như sau, mỗi hệ tọa độ lại có những vector đơn vị để có thể xác định được tọa độ của điểm nào đó so với gốc tọa độ. Khi hệ tọa độ này được biến đổi tuyến tính thì các điểm trên hệ tọa độ và vector đơn vị sẽ thay đổi, tuy nhiên sẽ vấn đảm bảo là đường thẳng trong hệ tọa độ vẫn là đường thẳng sau khi được biến đổi tuyến tính và các vector vẫn giữ nguyên tỉ lệ so với vector đơn vị. Chẳng hạn gọi $\overrightarrow {i}$ và $\overrightarrow {j}$​ là vector đơn vị và $\overrightarrow {v}$ là 1 vector bất kỳ thì $\overrightarrow {v} = a \times \overrightarrow {i} + b \times \overrightarrow {j}$​ , sau khi biến đổi thì $\overrightarrow {v}$ lúc này trở thành $\overrightarrow {v'}$, $\overrightarrow {i}$ trở thành $\overrightarrow {i'}$,$\overrightarrow {j}$​ trở thành $\overrightarrow {j'}$​ khi đó $\overrightarrow {v'} = a \times \overrightarrow {i'} + b \times \overrightarrow {j'}$.

Từ đó chúng ta thấy là nếu như muốn biến đổi tuyến tính thì chúng ta chỉ cần thay đổi bộ vector đơn vị là hệ thống các vector khác sẽ được biến đổi tuyến tính theo.

Trong bài này mình mới chỉ tìm hiểu trên hệ thống tọa độ 2 chiều nên mình tạm gọi vector đơn vị $\overrightarrow {i}$ là vector đơn vị trên trục hoành $(Ox)$ và vector $\overrightarrow {j}$​ là vector đơn vị cho trục tung $(Oy)$ khi đó ta có thể mô tả 1 vector bất kỳ như sau

alt text

với $a$, $b$ là 2 hệ số tỉ lệ. Với dạng hệ tọa độ 2 chiều bình thường với 2 vector đơn vị là $(1, 0)$ và $(0, 1)$ sẽ là

alt text

và với hệ tọa độ đã biến đổi tuyến tính chúng ta sẽ có cặp vector đơn vị mới là $\overrightarrow {i'}$ và $\overrightarrow {j'}$

alt text

Các thông số trong matrix

Matrix 2 chiều trong transform gồm 6 thông số xem chi tiết tại đường document của matrix tại đây

matrix(a, b, c, d, tx, ty)

Các thông số này sẽ tương ứng như sau $a, b$ tương ứng với cặp tọa độ của vector đơn vị trục hoành $\overrightarrow {i}$, $c, d$ tương ứng với tọa độ của vector đơn vị trục $\overrightarrow {j}$, $tx, ty$ là cặp thông số giúp di chuyển tịnh tiến gốc tọa độ theo px.

Khi các bạn đọc document của mozilla các bạn sẽ thấy dòng sau

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Đây là 1 dạng thông số sematic hơn để có thể dễ hình dung hơn cách hoạt động thay vì nhớ các con số phức tạp, chẳng hạn nếu các bạn thay đổi thông số $a$, đây là hoành độ của vector đơn vị trục hoành nên việc này tương đương với việc bạn dãn hệ tọa độ theo chiều $Ox$ và tạo hiện hiệu ứng scale, tương tự với thông số $d$. Khi thay đổi thông số $b$, nếu chúng ta giữ nguyên a thì chúng ta sẽ xô dịch hệ tọa độ theo chiều $Oy$ tạo hiệu ứng skew, tương tự với $c$ sẽ tạo ra hiệu ứng skew theo chiều Ox. Các bạn có thể lên trang web sau để hình dung ra các hoạt động https://html-css-js.com/css/generator/transform/

Ví dụ và giải thích

Sau đâu mình sẽ demo dùng thuộc tính matrix để xoay hình, việc làm này tương đương với việc các bạn sử dụng rotate trong transform. Để để làm được bài toán này chúng ta sẽ cần nhớ lại chút về đường tròn lượng giác.

Giải sử chúng ta muốn xoay theo chiều ngược kim đồng hồ 1 góc $\theta$ và $\overrightarrow {i}$ của chúng ta đang là vector đơn vị ở trục hoành, lúc này chúng ta mong muốn $\overrightarrow {i}$ sẽ trở thành $\overrightarrow {i'}$ có tọa độ $(cos \theta, sin \theta)$ và vector đơn vị trục tung lúc này sẽ là $(cos (90 + \theta), sin (90 +\theta))$. Nhưng có một lưu ý là do tọa độ trong web thì sẽ nằm ở góc trái trên cùng và chiều dương của trục $Oy$ thay vì hướng lên trên như toán học thì sẽ bị lộn ngược lại điều này dẫn đến chiều quay dương sẽ không còn là ngược chiều kim đồng hồ nữa mà là theo chiều kim đồng hồ nên muốn quay theo chiều ngược kim đồng hồ bạn sẽ phải giảm góc quay đi thay vì tăng như trong toán.

Sau đây là phần code demo của mình

Lời kết

Trên đây là những kiến thức mình tìm hiểu được về matrix trong css mong là có thể giúp mọi người có thể kiểm soát tốt hơn thuộc tính transform. Những kiến thức về toán hay về thuộc tính css này giới hạn trong sự hiểu biết của mình, vì vậy rất mong nhận được góp ý từ các bạn để có thể cải thiện bài viêt trở nên tốt hơn. Cảm ơn bạn vì đã danh thời gian đọc

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

spider

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


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