Hướng dẫn button scale animation 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. Show Như vậy là với
Tại sao cái trục tọa độ lại có chiều dương như vậy? Lý do rất đơn giản. Khi bạn code, 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ẽ được xuất hiện theo thứ tự từ trái sang phải, từ trên xuống dưới như khi viết chữ phải không? Đó cũng xác định chiều dương "đương nhiên" của 2 trục X, Y trên màn hình. Các bạn có thể thử bằng code pen phía trên nhé. ScaleFunction Scale đúng như tên gọi của nó, giúp điều chỉnh kích cỡ của đối tượng. Mặc định scale sẽ có giá trị là 1, tức là nguyên bản kích thước của đối tượng. Với scale mang giá trị < 1, kích thước mới sau scale sẽ nhỏ hơn ban đầu, và với scale lớn hơn 1 sẽ cho kích thước lớn hơn. Scale = 1 có thể coi như 100%, như vậy scale = 2 => kích thước tăng gấp 2 lần, scale = 0.5 => kích thước chỉ còn 1 nửa. Việc điều chỉnh kích thước này căn bản chính là tăng/giảm chiều cao - height/độ rộng - width của đối tượng. Như vậy là sẽ có tương ứng có thể tách riêng thay đổi chỉ chiều cao, hoặc chỉ độ rộng, hoặc thay đổi cả 2 cùng lúc.
RotateRotate là function 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ị Degrees (
Với số góc được đưa vào tham số, đối tượng sẽ xoay theo chiều dương là chiều kim đồng hồ tới góc đã chỉ định. Với tham số âm thì sẽ xoay ngược chiều kim đồng hồ. 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:
SkewSkew 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 giãn cả 2 phía. Skew sử dụng số đo góc để làm tham số kéo giãn. Với skewX, đối tượng sẽ giữ nguyên chiều cao, và 2 đầu bị kéo tăng theo chiều ngang. Hiểu nôm na là lấy tâm đối tượng làm điểm gốc, hình sẽ bị nghiêng đi nhưng vẫn giữ nguyên chiều cao => hình sẽ bị méo. Ví dụ:
Transform originPhía trên đã giới thiệu 4 function transform, tuy nhiên là còn 1 thuộc tính vô cùng quan trọng nữa phục vụ cho 4 function trên, đó là Transform origin. Transform origin xác định tâm điểm mà thuộc tính transform áp dụng lên. Lấy ví dụ cho function rotate, Mặ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? Lúc này sẽ sử dụng Transform origin nhé: Xem trên codepen Transform origin nhận các tham số là các key word: top, bottom, left, right. Với tham số
Có thể kết hợp 2 từ khóa để chọn điểm xoay ở góc như ví dụ phía trên. Ngoài ra transform-origin còn có thể nhận tham số như % nữa. Như phía trên đã nói, gốc tọa độ O sẽ là điểm
Để có thể nắm rõ hơn, hãy cứ thử thực hành nhé. 3D transformGiờ tới 3D transform. 3D transform thực tế là tương tự như 2D transform, nhưng có bổ sung thêm 1 trục Z với chiều hướng vuông góc màn hình tới mắt chúng ta. Để có thể tạo được môi trường 3D, cần có đầu tiên là thuộc tính Perspective & translateZMà Bất cứ
khi nào bạn muốn thao tác với môi trường 3D, thì việc đầu tiên là nhớ định nghĩa
Link codepen: https://codepen.io/bunnypi04/pen/OJJdqbZ Giờ khi hover vào hình ảnh bạn thấy nó giống như đang scale lớn lên phải không? Nhưng thực tế thì đó ko phải là hiệu ứng đã được
cài đặt. Thực tế thì hiệu ứng sẽ là tấm ảnh được đưa lại gần mắt chúng ta (di chuyển theo trục Z trên hệ tọa độ màn hình), nên ta cảm thấy cái ảnh to hơn, mặc dù độ rộng và chiều cao của tấm ảnh không hề thay đổi. Vậy thì Mặc định, tâm điểm
Dưới đây là 1 ví dụ mình tìm được: Xem trên code pen Rotate in 3DCó 1 thao tác nữa trong môi trường 3D ngoài translate, đó là rotate. Ở trên ta đã biết về rotate thường, nhưng thực ra có 3 loại rotate riêng lẻ: rotateX, rotateY, rotateZ Giờ vẫn hình ảnh trên, ko translate nữa, đổi qua rotateZ thử xem nhé:
Bạn sẽ thấy hình ảnh xoay lấy trục Z làm tâm, trông như rotate thường vậy. Giờ thử thay rotateZ thành rotateX xem nhé. Khi chọn rotateX, trục quay của hình sẽ chính là trục Ox, hay là 1 đường ngang, thử hover sẽ thấy . Ví dụ như khi rotateX(90deg), bạn sẽ thấy hình ảnh xoay rồi biến mất luôn, vì nó đang nằm vuông góc với màn hình, mà nó lại ko có độ dày, nên trông như đang biến mất vậy. Tương tự vớirotateY() sẽ là trục Oy làm trục xoay.Kết bàiBài này đã hướng dẫn tìm hiểu về transform, tuy nhiên con đường tới tận dụng làm thành animation sao cho đẹp còn cần khá nhiều điều kết hợp. Bài tiếp theo mình sẽ có vài hướng dẫn để mọi người dần dà làm quen và có thêm ý tưởng cho animation của mình nhé |