Thuộc tính transform trong CSS

• Trần Thị Vân
• 1273
• 18/07/2025

Chức năng của Thuộc tính transform trong CSS

Thuộc tính transform trong 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.

Chạy Thử

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ả.

Chạy Thử

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.

Chạy Thử

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 độ.

Chạy Thử

Cách kết hợp transform với transition trong CSS

Khi sử dụng transform cùng transition, các thay đổi về vị trí, kích thước, góc xoay hoặc độ nghiêng có thể diễn ra mượt mà thay vì chuyển trạng thái đột ngột. Cách kết hợp này đặc biệt hữu ích khi tạo hiệu ứng tương tác cho nút bấm, hình ảnh, thẻ nội dung hoặc các thành phần cần phản hồi khi người dùng rê chuột.

Điểm quan trọng là transform quyết định phần tử sẽ thay đổi như thế nào, còn transition kiểm soát quá trình chuyển đổi giữa trạng thái ban đầu và trạng thái mới.

.box {
    transition: transform 0.3s ease;
}

.box:hover {
    transform: scale(1.05);
}

Tạo hiệu ứng phóng to khi hover

Để tạo hiệu ứng phóng to khi người dùng đưa chuột lên một phần tử, có thể kết hợp transform: scale() với transition. Phần tử sẽ tăng kích thước từ từ thay vì phóng to ngay lập tức.

.image {
    transition: transform 0.3s ease;
}

.image:hover {
    transform: scale(1.08);
}

Giá trị 1.08 làm phần tử lớn hơn khoảng 8% so với kích thước ban đầu. Có thể điều chỉnh con số này tùy vào thiết kế, nhưng nên giữ mức vừa phải để hiệu ứng không gây cảm giác quá mạnh hoặc làm thay đổi bố cục.

Tạo hiệu ứng xoay và dịch chuyển khi hover

Không nhất thiết chỉ sử dụng một hàm transform. Có thể kết hợp nhiều hàm trên cùng một thuộc tính để tạo chuyển động linh hoạt hơn. Chẳng hạn, phần tử vừa dịch chuyển lên trên vừa xoay nhẹ khi rê chuột.

.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-6px) rotate(1deg);
}

Cách này phù hợp với các thẻ nội dung hoặc thành phần giao diện cần tạo cảm giác nổi lên khi tương tác. Khi kết hợp nhiều hàm, thứ tự của chúng cũng nên được kiểm soát để kết quả hiển thị đúng với ý đồ thiết kế.

Lưu ý khi sử dụng transform để tạo hiệu ứng

Hiệu ứng transform nên được sử dụng ở mức vừa đủ. Việc phóng to quá nhiều, xoay quá mạnh hoặc dịch chuyển một khoảng lớn có thể khiến giao diện thiếu ổn định và làm người dùng mất tập trung.

Nên đặt transition ở trạng thái mặc định thay vì chỉ đặt trong :hover. Nhờ đó, phần tử sẽ chuyển động mượt cả khi bắt đầu tương tác lẫn khi chuột rời khỏi phần tử.

.button {
    transition: transform 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

Ngoài ra, nên kiểm tra hiệu ứng trên nhiều kích thước màn hình và tránh lạm dụng quá nhiều chuyển động trong cùng một khu vực. Một hiệu ứng đơn giản nhưng phản hồi rõ ràng thường đem lại trải nghiệm tốt hơn so với việc kết hợp quá nhiều transform.

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.