Top 20 thuộc tính transform

     

Bài trước bản thân đã mày mò về thuộc tính thông dụng và quan trọng đầu tiên khi có tác dụng CSS animation rồi, bài lần này bản thân sẽ trình làng về thuộc tính cũng cực kì hay được sử dụng, chính là Transforms.

Bạn đang xem: Top 20 thuộc tính transform

*

Giới thiệu Transforms

Dùng để làm gì nhỉ?

Ở bài trước, họ đã biết Transition giúp ta điều khiển và tinh chỉnh được những thuộc tính CSS ảnh hưởng lên các đối tượng người dùng cho "mượt" trong một khoảng thời gian. Transforms thì không hỗ trợ điều khiển những thuộc tính ảnh hưởng tác động lên đối tượng mà sẽ điều khiển trực tiếp đối tượng đó, như thể div, image,... ở trong tính transforms là trực thuộc tính được thực hiện để khẳng định các biến hóa 2 chiều, 3 chiều, rất có thể là đổi khác xoay, thay đổi tỉ lệ, hình dạng, di chuyển,... Theo 1 cách nói khác, chúng ta sẽ học tập cách đổi khác hình dạng kích thước và địa điểm vật thể bằng Transforms.

Các dạng transforms:

Bởi vì rất có thể xác định các biến đổi 2 chiều và 3 chiều, nên đương nhiên là tất cả 2 dạng transforms: 2d transforms và 3d transforms.

2D Transforms

Các function

Có 4 function của transforms sẽ ship hàng cho họ định nghĩa phương pháp hiển thị cho đối tượng của chúng ta:

Scale: cho phép thay đổi kích thước đối tượngTranslate: Điều khiển sự biến đổi vị trí của đối tượngRotate: Xoay đối tượng người dùng theo góc bất kýSkew: kéo dãn đối tượng người sử dụng theo trục x hoặc y

Xem bên trên codepen


Translate

Về cơ bạn dạng thì Translate function sẽ dịch rời đối tượng theo trục X và Y.

Xem thêm: Đẻ Xong Bao Lâu Được Làm Tóc, Sau Sinh Bao Lâu Thì Được Làm Tóc

translate(vị trí biến hóa theo trục X, vị trí đổi khác theo trục Y)translateX(vị trí biến đổi theo trục X): thực hiện khi chỉ có nhu cầu dịch gửi theo chiều ngangtranslateY(vị trí biến đổi theo trục Y): sử dụng khi chỉ mong muốn dịch gửi theo chiều dọc=> ví dụ:transform: translate(10px, -30px); => đối tượng dịch rời 10px về bên cạnh phải, cùng 30px phía lên trênĐừng quên hệ trục tọa độ của CSS hơi khác so với trục tọa độ mà ta đã học ở trường nhé:

*
Giờ tới 3d transform. 3 chiều transform thực tiễn là tựa như như 2 chiều transform, nhưng có bổ sung thêm 1 trục Z với khunh hướng vuông góc màn hình hiển thị tới mắt bọn chúng ta.

Để rất có thể tạo được môi trường xung quanh 3D, cần phải có đầu tiên là thuộc tính perspective.

Perspective & translateZ

Mà perspective là gì? Perspective chúng ta cũng có thể hiểu như là khoảng cách giữa mắt họ tới screen hiển thị đối tượng người sử dụng vậy - hay khoảng cách từ mắt tín đồ xem tới màn hình. Perspective nhận giá trị đơn vị chức năng là pixels.

Xem thêm: Hướng Dẫn Cách Khóa Ảnh Bìa Trên Facebook, Cài Đặt Riêng Tư Avatar Facebook

Bất cứ khi nào bạn muốn thao tác với môi trường xung quanh 3D, thì việc đầu tiên là nhớ quan niệm perspective nhé. Perspective sẽ tiến hành định nghĩa trong phần tử cha chứa đối tượng cần transform 3D. Để dễ tưởng tượng về perspective, hãy xem ví dụ dưới đây


Giờ khi hover vào hình hình ảnh bạn thấy nó hệt như đang scale mập lên buộc phải không? Nhưng thực tiễn thì kia ko nên là hiệu ứng sẽ được download đặt. Thực tế thì hiệu ứng đã là tấm ảnh được chuyển lại sát mắt họ (di gửi theo trục Z bên trên hệ tọa độ màn hình), đề xuất ta cảm giác cái ảnh to hơn, tuy vậy độ rộng lớn và chiều cao của tấm ảnh không hề vậy đổi. Vậy thì perspective làm nhiệm vụ gì sống đây? các bạn hãy thử nỗ lực perspective tại body toàn thân từ 1000px xuống còn 300px (bằng với translateZ) giúp xem thử nhé. Bạn sẽ thấy cái hình ảnh trở yêu cầu "siêu to lớn khổng lồ", cảm giác như dí sát mắt ta vậy. Đó là do ta sẽ định nghĩa khoảng cách tới screen bằng với khoảng cách translate Z. Từ ví dụ này chắn chắn mọi fan đã đọc perspective đó là cơ sở để có độ phệ của hình hình ảnh khi translateZ. Đó là lý do luôn luôn phải quan niệm perspective trước khi thao tác làm việc 3D.

Mặc định, trọng tâm điểm perspective - hay dễ nắm bắt hơn là vấn đề hội tụ của không gian 3D sẽ là vấn đề trung tâm của khối để perspective. Tuy nhiên bạn cũng có thể thay đổi điểm hội tụ này bằng phương pháp sử dụng perspective-origin:

perspective-origin: 24% 75%;Dưới đây là 1 ví dụ mình tìm kiếm được:Xem trên code pen


Rotate in 3D

Có 1 thao tác làm việc nữa trong môi trường thiên nhiên 3D bên cạnh translate, sẽ là rotate. Ở trên ta đã biết về rotate thường, nhưng thực ra có 3 nhiều loại rotate riêng biệt lẻ: rotateX, rotateY, rotateZ

Giờ vẫn hình hình ảnh trên, ko translate nữa, đổi sang rotateZ test xem nhé:

img:hover transform: rotateZ(120deg); Bạn vẫn thấy hình ảnh xoay lấy trục Z làm tâm, trông như rotate thường vậy. Tiếng thử cầm rotateZ thành rotateX coi nhé. Khi chọn rotateX, trục tảo của hình sẽ đó là trục Ox, hay 1 đường ngang, test hover đang thấy

*

3D world

Còn nhiều thứ khá tốt ho về 3 chiều transform và bí quyết ứng dụng, tuy thế mình chưa tò mò và "thấm" hết để viết ra phân tích và lý giải cho hồ hết người, như tiêu đề là "tập tành tra cứu hiểu", hi vọng sau này tận dụng làm cho được gần như thứ "super" hơn vẫn viết được bài nâng cao cho mọi người

Kết bài

Bài này vẫn hướng dẫn tò mò về transform, tuy nhiên con mặt đường tới tận dụng làm thành animation thế nào cho đẹp còn cần không ít điều kết hợp. Bài tiếp theo mình sẽ có vài trả lời để mọi fan dần dà làm quen và bao gồm thêm ý tưởng cho animation của chính bản thân mình nhé