Transform 3D là gì?
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: ...
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);
awidth: 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);
awidth: 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);
awidth: 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);
awidth: 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
