Css xoay

lục mục lục

Ngoài thuộc tính

transform-origin: 100% 50%;

3 của CSS3 giúp bạn tạo ra các hiệu ứng chuyển động của các phần tử trong trang web, thì nó còn có một thuộc tính khác được sử dụng kèm theo với

transform-origin: 100% 50%;

3 rất thường xuyên đó là thuộc tính

transform-origin: 100% 50%;

5 có chức năng thay đổi hình dạng các dạng

Thay đổi cấu hình với biến đổi

Với biến đổi, bạn có thể xoay, co giãn kích thước hoặc co lại hình dạng 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 làm thay đổi định dạng

Cách viết

transform: function( value );

-moz-transform: function( value );

-webkit-transform: function( value );

Trong đó,

transform-origin: 100% 50%;

6 là tên hàm làm thay đổi hình dạng và giá trị là giá trị của hàm, mỗi hàm có thể sẽ có cách viết giá trị khác nhau

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

Các chức năng chuyển động của biến đổi

Xoáy – 

transform-origin: 100% 50%;

7

Với hàm

transform-origin: 100% 50%;

7 bạn có thể thiết lập một đối tượng bị xoay theo góc độ. Ở chức năng này, bạn có thể thiết lập kiểu giá trị _

transform-origin: 100% 50%;

9 (thiết lập giá trị góc, tức là độ) hoặc

transform-origin: 100% 50%;

0 (1 lượt = 360 độ). Các bạn xem ví dụ live dưới đây để hiểu hơn nhé

[codepen id=”Eaqvpg”]

Co giãn – 

transform-origin: 100% 50%;

0

Với hàm

transform-origin: 100% 50%;

0 bạn có thể thiết lập co giãn kích thước của một phần tử dựa trên trục y (trục thẳng đứng) và trục x (trục ngang), và hàm này bạn sẽ thiết lập là

transform-origin: 100% 50%;

2 hoặc s

transform-origin: 100% 50%;

3 và

transform-origin: 100% 50%;

4

[codepen id=”bNXrOZ”]

Kéo nghiêng – skew()

Bạn có thể kéo một đối tượng dựa trên trục Y và trục X với hàm

transform-origin: 100% 50%;

5 và

transform-origin: 100% 50%;

6, giá trị bên trong là số

transform-origin: 100% 50%;

9 tương tự như

transform-origin: 100% 50%;

7

[codepen id=”qEeXvX”]

Tùy chỉnh cấu hình tâm với biến đổi nguồn gốc

Một thuộc tính thú vị nữa mà bạn có thể sử dụng kèm theo biến đổi đó là

transform-origin: 100% 50%;

9, nó sẽ cho phép bạn dịch chuyển phần tử dựa trên kiểu thay đổi hình dạng ở

transform-origin: 100% 50%;

5. Nói nghe có vẻ khó hiểu, ví dụ như bạn sử dụng

transform-origin: 100% 50%;

7 để xoay ảnh và khi sử dụng thêm

transform-origin: 100% 50%;

9 thì nó sẽ cho phép bạn điều chỉnh độ lớn của vòng xoay tính từ phần tử tâm lý. Thuộc tính

transform-origin: 100% 50%;

9 phải được sử dụng kèm theo với

transform-origin: 100% 50%;

5 và có thể áp dụng cho bất kỳ hàm nào

Thuộc tính

transform-origin: 100% 50%;

9 có hai giá trị là X (phương pháp thẳng đứng) và Y (phương pháp nằm 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”]

Lời kết

Bây giờ bạn đã thấy CSS thực sự thú vị chưa? . Tuy nhiên ở sê-ri CSS cơ bản này, mình sẽ dừng lại ở biến đổi vì bù lại đã quá đủ cho các kiến ​​thức cơ bản CSS rồi. Những tính năng nâng cao hơn mình sẽ hướng dẫn ở CSS nâng cao hàng loạt

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. Default scale will have the value is 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

transform-origin: 100% 50%;

3

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ị Độ (

transform-origin: 100% 50%;

36) hoặc độ dốc (

transform-origin: 100% 50%;

37)

transform-origin: 100% 50%;

6

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-origin: 100% 50%;

7

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ụ

transform-origin: 100% 50%;

38 => 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 chuyể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ố

transform-origin: 100% 50%;

39, 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

transform-origin: 100% 50%;

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

transform-origin: 100% 50%;

61 của đối tượng, tương ứng với trục Y cũng vậ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

transform-origin: 100% 50%;

62 của đối tượng