Transform 3D

Transform 3D là gì?

transform sử dụng giá trị perspective để thực hiện biến đổi các giá trị transform sang dạng 3 chiều.

Thường được ứng dụng trong việc tạo các vật thể 3 chiều, hoặc kết hợp với các thuộc tính khác để tạo chuyển động 3 chiều.

Cấu trúc

tag {
    transform: perspective(đơn vị);
}

Đơn vị của perspective có thể là pixel, em, ...

Cách sử dụng

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>Transform 3D</p>
</div>
</body>
</html>

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

p {
    background: #7ACAFF;
    height: 100px;
    transform: rotateX(30deg);
    width: 100px;
}

Hiển thị trình duyệt - khi chưa sử dụng perspective:

transform perspective

Ta sẽ thêm giá trị perspective để xem cách biến đổi như thế nào nhé:

CSS viết:

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

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

transform perspective

Ta thấy thành phần p đã thực hiện một biến đổi 3D so với ban đầu:

Ví dụ thêm - Một số biến đổi 3D khác

3D với phép quay trục Y

p {
    background: #7ACAFF;
    height: 50px;
    transform: perspective(145px) rotateY(40deg);
    width: 120px;
}

transform perspective

3D với phép quay trục Y

p {
    background: #7ACAFF;
    height: 50px;
    transform: perspective(250px) rotateX(40deg) rotateY(20deg) translateX(100);
    width: 120px;
}

transform perspective

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.

Kết thúc bài học CSS3

Tới đây chúng ta đã học được các bài học thường dùng liên quan tới CSS3 rồi, với những thuộc tính này, các bạn hoàn toàn có thể xử lý phần lớn layout hiện nay, những thuộc tính hay giá trị khác ít xuất hiện hơn, thì các bạn có thể xem thêm tại phần tham khảo CSS3 nhé.

transform