Ngọc Thanh - 37
- 18/07/2025
Ngọc Thanh Thuộc tính transform trong CSS là một loại thuộc tính của CSS dùng để thay đổi hình dạng, kích thước, vị trí và hướng của một phần tử HTML, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính transform trong CSS
Thuộc tính transform trong CSS là gì?
Thuộc tính transform trong CSS là một loại thuộc tính của CSS dùng để thay đổi hình dạng, kích thước, vị trí và hướng của một phần tử HTML, giúp canh chỉnh giao diện đẹp hơn và giúp trải nghiệm website mượt hơn khi hover.
Các giá trị của Thuộc tính transform trong CSS
Css transform rotate
{ transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transform:rotate(45deg); }
Ở ví dụ này mình xoay phần tử 45 độ theo chiều kim đồng hồ, nhớ hover vào để xem:
-moz-transition hỗ trợ cho firefox.
-webkit-transition hỗ trợ cho Google Chrome và Safari.
-o-transition hỗ trợ cho Opera.
Css transform scale
{transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1);}
Ở ví dụ này mình phóng to chiều ngang và chiều dọc lên 1.1 lần, cột 1 là chiều ngang, cột 2 là chiều dọc, nhớ hover vào hình ảnh để xem kết quả.
Css transform translate
{transform: translate(20px,10px); -moz-transform: translate(20px,10px); -webkit-transform: translate(20px,10px); -o-transform: translate(20px,10px); -ms-transform: translate(20px,10px);}
Ở vị dụ này, sau khi hover vào thẻ div thì mình cho nó dịch chuyển sang phải 20px và chạy xuống 10px.
Css transform skew
{transform: skew(20deg,10deg); -moz-transform: skew(20deg,10deg); -webkit-transform: skew(20deg,10deg); -o-transform: skew(20deg,10deg); -ms-transform: skew(20deg,10deg);}
Ở ví dụ này, sau khi hover vào thẻ div mình cho nó nghiêng theo chiều ngang 20 độ và chiều dọc 10 độ.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính transform trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
