Hướng dẫn css transform: translate

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• transform

transform là gì?

transform là thuộc tính cho phép dịch chuyển, thay đổi vị trí, hướng, chiều hoặc xoay thành phần, là một trong những thuộc tính đột phá trong CSS3.

Ứng dụng của transform rất lớn, tạo nên một bước ngoặc trong điều khiển giao diện, trước đây bạn chỉ có thể dùng hình ảnh cho những giao diện xoay trục, 3D hay thậm trí là dịch chuyển, hoặc đơn giản là ứng dụng trong hover thay đổi hình dạng của thành phần,... tất sẽ cả đơn giản hơn khi bạn biết

transform.

Cấu trúc

tag {
    transform: giá trị;
}

Giá trị của transform rất nhiều, bài học này chủ yểu cho bạn biết cách sử dụng nên sẽ giới thiệu vài giá trị thường dùng, những giá trị khác bạn có thể tìm hiểu ở phần tham khảo thuộc tính transform.

Cách sử dụng

HTML viết:

transform

CSS viết - khi chưa sử dụng transform:

p {
    background: #7ACAFF;
    height: 100px;
    width: 100px;
}

Hiển thị trình duyệt:

Ta sẽ xem xét vài giá trị của transform để hiểu hơn về thuộc tính này nhé:

CSS viết:

p {
    background: #7ACAFF;
    height: 50px;
    transform: rotate(45deg);
    width: 120px;
}

Hiển thị trình duyệt:

Kết quả cho ta thấy, thành phần p hiện tại đã được xoay một góc 45 độ, các bạn xem thêm một vài ví dụ bên dưới nhe:

Ví dụ thêm - Một số transform thường dùng

Dịch chuyển dọc

p {
    background: #7ACAFF;
    height: 50px;
    transform: translateX(100px);
    width: 120px;
}

Biến đổi nghiên theo trục X

p {
    background: #7ACAFF;
    height: 50px;
    transform: skewX(30deg);
    width: 120px;
}

Các giá trị khác, bạn có thể xem thêm tại tham khảo transform hoặc sử dụng công cụ tạo transform để khám phá nhiều tính năng hơn.

• Trang chủ
• Tham khảo
• CSS
• CSS3
• Ví dụ về thuộc tính transform: translate()

Thuộc tính transform với giá trị translate()

Thuộc tính transform với giá trị translate: Xác định một dịch chuyển 2D.

HTML viết:

transform

CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
}

Hiển thị trình duyệt khi chưa có transform: translate():

Thêm thuộc tính transform: translate(), CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: translate(10px,10px);
    -moz-transform: translate(10px,10px);
    -webkit-transform: translate(10px,10px);
    -o-transform: translate(10px,10px);
    -ms-transform: translate(10px,10px);
}

Hiển thị trình duyệt khi có transform: translate()

Giá trị translate();