[Học CSS] Thay đổi hình dạng với transform và transform-origin [NEW]

Ngoài các thuộc tính transition của CSS3 để giúp bạn tạo hiệu ứng hoạt hình của các phần tử trong trang web, nó có một thuộc tính khác được sử dụng với transition rất thường xuyên đó là thuộc tính transform có chức năng thay đổi hình dạng của các phần tử khối trong website.

Thay đổi hình dạng với biến đổi

Với biến đổi, bạn có thể xoay, thay đổi kích thước hoặc làm lệch hình dạng của một phần tử. Ngoài ra, nó còn có một số tính năng khác cũng liên quan đến việc thay đổi hình dạng.

Phong cách viết:

transform: function( value );

-moz-transform: function( value );

-webkit-transform: function( value );

Trong đó, function() là tên của hàm thay đổi hình dạng và giá trị là giá trị của hàm, mỗi hàm có thể có cách ghi giá trị khác nhau.

Về các hàm làm biến đổi hình dạng thì có rất nhiều nhưng mình sẽ chỉ nói về một số hàm đơn giản thường dùng nhất.

Các hàm chuyển động của phép biến hình

Xoay – rotate()

Với chức năng rotate() bạn có thể đặt một đối tượng được xoay theo độ góc. Trong chức năng này, bạn có thể đặt giá trị kiểu [n]deg (đặt giá trị góc, tức là độ) hoặc [n]turn (1 lượt = 360 độ). Vui lòng xem ví dụ trực tiếp bên dưới để hiểu rõ hơn.

[codepen id=”Eaqvpg”]

Độ co giãn – scale()

Với chức năng scale() bạn có thể đặt tỷ lệ của một phần tử dựa trên trục y (trục tung) và trục x (trục hoành) và hàm này bạn sẽ đặt là scale(X) hoặc scaleX() và scaleY().

[codepen id=”bNXrOZ”]

Kéo xiên – xiên ()

Bạn có thể kéo một đối tượng nghiêng dọc theo trục Y và X bằng chức năng skewX() và skewY()giá trị bên trong là số [n]deg tương tự rotate().

[codepen id=”qEeXvX”]

Tùy chỉnh tâm hình dạng với điểm gốc biến đổi

Một thuộc tính thú vị khác mà bạn có thể sử dụng với chuyển đổi là transform-originnó sẽ cho phép bạn di chuyển phần tử dựa trên sự thay đổi hình dạng trong transform. Nghe có vẻ khó hiểu, ví dụ bạn sử dụng rotate() để xoay hình ảnh và khi nào sử dụng thêm transform-origin thì nó sẽ cho phép bạn điều chỉnh kích thước của vòng quay từ tâm phần tử. Đặc tính transform-origin phải được sử dụng với transform và có thể được áp dụng cho bất kỳ chức năng nào.

Đặc tính transform-origin có hai giá trị, X (dọc) và Y (ngang) và giá trị của nó sẽ dựa trên kích thước của phần tử.

transform-origin: 100% 50%;

[codepen id=”gbVGYQ”]

Phần kết

Bây giờ bạn đã thấy CSS thực sự thú vị chưa? Nhưng đó không phải là tất cả vì CSS3 cũng làm được rất nhiều thứ hay ho, thậm chí nó có thể tạo hoạt ảnh 3D hoặc vẽ các khối hình học rất tốt. Tuy nhiên, trong loạt bài về CSS cơ bản này, mình sẽ dừng lại ở chuyển đổi vì như vậy là quá đủ cho những kiến ​​thức CSS cơ bản. Các tính năng nâng cao hơn mình sẽ hướng dẫn trong loạt bài CSS nâng cao.