Quá trình chuyển đổi: khả năng hiển thị css

Bài trước mình đã tìm hiểu về thuộc tính phổ biến và quan trọng đầu tiên khi làm CSS animation rồi, bài lần này mình sẽ giới thiệu về thuộc tính cũng cực kỳ hay được sử dụng, đó là Transforms

as so is with

• x > 0. các đối tượng sẽ chuyển về bên phải vị trí ban đầu
• x < 0. các đối tượng sẽ di chuyển về bên trái vị trí ban đầu
• y > 0. object di chuyển xuống bên dưới vị trí ban đầu
• y < 0. convert object up on of the first position

Tại sao cái trục tọa độ lại có chiều dương như vậy? . Khi bạn viết mã, các phần tử sẽ xuất hiện đầu tiên ở trên cùng bên trái của màn hình, sau đó thêm các đối tượng khác, nếu không có css gì đặc biệt với các đối tượng này, mọi thứ sẽ xuất hiện theo thứ tự

The you can try by code pen side on nhé

Tỉ lệ

Chức năng Scale đúng như tên gọi của nó, giúp điều chỉnh kích thước của đối tượng. Mặc định quy mô sẽ có giá trị là 1, tức là kích thước nguyên bản của đối tượng. With scale mang value < 1, new size after scale will small more than start, and with scale large more than 1 will for size large more. Tỷ lệ = 1 có thể giống như 100%, chẳng hạn như tỷ lệ = 2 => kích thước tăng gấp 2 lần, tỷ lệ = 0. 5 => size only also 1 half. Điều chỉnh kích thước này căn bản chính là tăng/giảm chiều cao - chiều cao/độ rộng - chiều rộng của đối tượng. Như vậy sẽ có một ứng dụng tương ứng có thể tách riêng thay đổi chiều cao hoặc chỉ độ rộng hoặc thay đổi cả 2 cùng một lúc

scaleX(tỉ lệ giãn width)
scaleY(tỉ lệ giãn height)
scale(tỉ lệ thay đổi toàn bộ kích thước)
hoặc 
scale(tỉ lệ giãn width, tỉ lệ dãn height)

Quay

Xoay là chức năng giúp xoay đối tượng, nó sẽ có 1 tham số là lượng muốn xoay hoặc số đo góc mà bạn muốn xoay, theo đơn vị Độ (

scaleX(tỉ lệ giãn width)
scaleY(tỉ lệ giãn height)
scale(tỉ lệ thay đổi toàn bộ kích thước)
hoặc 
scale(tỉ lệ giãn width, tỉ lệ dãn height)

6) hoặc độ dốc (

scaleX(tỉ lệ giãn width)
scaleY(tỉ lệ giãn height)
scale(tỉ lệ thay đổi toàn bộ kích thước)
hoặc 
scale(tỉ lệ giãn width, tỉ lệ dãn height)

7)

rotate(số góc - lượng)

Với góc được đưa vào tham số, các đối tượng sẽ xoay theo chiều dương là chiều kim đồng hồ tới góc đã định. Với tham số âm thanh thì sẽ xoay ngược chiều kim đồng hồ. Số lượng xoay ở đây là số lần bạn muốn xoay đối tượng. Ví dụ như muốn xoay 1 vòng, 2 vòng chẳng hạn

transform: rotate(1turn); => xoay 1 vòng 360 độ
transform: rotate(180deg);
transform: rotate(200grad);

Nghiêng

Skew function giống như sự kết hợp của translate và scale function, tức là có skewX để kéo giãn theo chiều ngang, và skewY để kéo giãn theo chiều dọc hoặc skew(tham số X, tham số Y) để cùng lúc kéo cả hai . Skew sử dụng góc đo góc để kéo giãn tham số

Với skewX, các đối tượng sẽ giữ nguyên chiều cao và 2 đầu kéo tăng theo chiều ngang. Hiểu nôm na là lấy tâm đối tượng làm gốc, hình sẽ nghiêng đi nhưng vẫn giữ nguyên chiều cao => hình sẽ bị méo mó. Ví dụ

scaleX(tỉ lệ giãn width)
scaleY(tỉ lệ giãn height)
scale(tỉ lệ thay đổi toàn bộ kích thước)
hoặc 
scale(tỉ lệ giãn width, tỉ lệ dãn height)

8 => chiều cao giữ nguyên nhưng hình nghiêng kéo giãn 30 độ. Giải thích bằng lời nói khó khăn, các bạn hãy thử trực tiếp ở code pen trên kia nhé

Chuyển đổi nguồn gốc

Phía trên đã giới thiệu 4 chức năng biến đổi, tuy nhiên vẫn còn 1 thuộc tính vô cùng quan trọng nữa phục vụ cho 4 chức năng trên, đó là Nguồn gốc chuyển đổi. Transform gốc xác định tâm điểm thuộc tính biến áp dụng lên

Lấy ví dụ về chức năng xoay, Mặc dù xác định tâm xoay của đối tượng luôn là trọng tâm của đối tượng, nhưng nếu bạn muốn nó xoay với tâm là góc trên cùng bên trái thì sao?

Xem trên codepen

Biến đổi nguồn gốc nhận các tham số là từ khóa. trên, dưới, trái, phải. Với tham số

scaleX(tỉ lệ giãn width)
scaleY(tỉ lệ giãn height)
scale(tỉ lệ thay đổi toàn bộ kích thước)
hoặc 
scale(tỉ lệ giãn width, tỉ lệ dãn height)

9, thì điểm biến đổi gốc hay mình gọi ở đây là tâm xoay cho dễ hình dung, tâm xoay sẽ nằm ở tâm điểm của cạnh trên hình. Tương tự nếu chỉ đưa 1 từ khóa vào thì 'điểm xoay' này sẽ nằm ở trung điểm cạnh đó

Có thể kết hợp 2 từ khóa để chọn điểm xoay ở góc như ví dụ về phía trên

Ngoài ra transform-origin còn có thể nhận các tham số như % nữa. Phía trên đã nói, gốc tọa độ O sẽ là điểm

rotate(số góc - lượng)

0 của đối tượng. Vì vậy, tham số phần trăm đầu tiên sẽ là theo ứng dụng X, nếu tham số trục X là 100% tương ứng với điểm

rotate(số góc - lượng)

1 của đối tượng, tương ứng như vậy cũng với trục Y. Từ đó có thể tính điểm mà ta muốn theo phần trăm của 2 trục tọa độ. Ví dụ. 50% theo trục X kết hợp với 50% theo trục Y sẽ được điểm

rotate(số góc - lượng)

2 của đối tượng