Ngoài trực thuộc tính transition của CSS3 khiến cho bạn tạo ra những hiệu ứng hoạt động của các phần tử trong website, thì nó còn một nằm trong tính khác được sử dụng kèm với transition rất liên tiếp đó là nằm trong tính transform có chức năng đổi bề ngoài các bộ phận block vào website.

Bạn đang xem: Transform css là gì


Thay đổi hình dạng với transform

Với transform, bạn có thể xoay, co giãn kích thước hoặc bóp nghiêng hình dạng 1 phần tử. Ngoài ra nó cũng còn một vài tính năng không giống cũng liên quan đến vấn đề làm thay đổi hình dạng.

Cách viết:

transform: function( value );-moz-transform: function( value );-webkit-transform: function( value );Trong đó, function() là tên hàm làm chuyển đổi hình dạng và value là quý giá của hàm, từng hàm có thể sẽ bao gồm cách viết quý giá khác nhau.

Về các hàm làm đổi khác hình dạng đến transform thì có không ít nhưng mình chỉ nói qua một số hàm dễ dàng thường dùng nhất.


*
đổi khác hình dạng với transform với transform-origin 104">

Các hàm chuyển động của transform


Xoay – rotate()

Với hàm rotate() bạn tất cả thể thiết lập cấu hình một đối tượng người dùng bị luân phiên theo độ góc. Ở hàm này bạn có thể thiết lập quý giá kiểu deg (thiết lập quý giá góc, có nghĩa là độ) hoặc turn (1 turn = 360 độ). Các bạn hãy xem ví dụ live dưới đây để phát âm hơn.

Co giãn – scale()

Với hàm scale() bạn có thể thiết lập cấu hình co giãn size của một trong những phần tử dựa vào trục y (trục thẳng đứng) với trục x (trục ngang), và hàm này các bạn sẽ thiết lập là scale(X) hoặc scaleX() và scaleY().

Kéo nghiêng – skew()

Bạn hoàn toàn có thể kéo một đối tượng người sử dụng nghiêng dựa theo trục Y cùng trục X với hàm skewX() và skewY(), giá bán trị bên phía trong là số deg tương từ rotate().

Tùy chỉnh tâm ngoài mặt với transform-origin

Một ở trong tính thú vui nữa mà chúng ta cũng có thể dùng tất nhiên transform sẽ là transform-origin, nó sẽ cho phép bạn dịch chuyển phần tử dựa vào kiểu thay đổi hình dạng ở transform. Nói nghe có vẻ như khó hiểu, ví dụ như bạn sử dụng rotate() để xoay hình ảnh và khi sử dụng thêm transform-origin thì nó sẽ có thể chấp nhận được bạn chỉnh độ khủng của vòng chuyển phiên tính từ trọng điểm phần tử. Nằm trong tính transform-origin phải được dùng kèm cùng với transform và rất có thể áp dụng cho bất kỳ hàm nào.

Thuộc tính transform-origin có hai giá trị là X (phương thẳng đứng) và Y (phương ở ngang) và cực hiếm nó sẽ phụ thuộc vào kích thước của phần tử.

Xem thêm: Sự Khác Biệt Giữa Falsetto Là Gì, Giọng Giả Thanh Nghĩa, Giọng Mũi, Giọng Vang Ngực

transform-origin: 100% 50%;

Lời kết

Bây giờ chúng ta đã thấy CSS đích thực thú vị chưa nhỉ? Nhưng nhiêu này vẫn chưa hết đâu vì chưng CSS3 còn khiến cho được những cái rất lôi cuốn nữa, thậm chí là nó có thể làm vận động 3D hoặc vẽ các khối hình học rất hay. Mặc dù ở serie CSS cơ phiên bản này, bản thân sẽ tạm dừng ở transform vì bấy nhiêu đó đã quá đủ cho những kiến thức CSS cơ bản rồi. đều tính năng nâng cấp hơn bản thân sẽ chỉ dẫn ở serie CSS nâng cao.