Hướng dẫn perspective css - quan điểm css
Show Định nghĩa và sử dụngThông thường khi nhìn một thành phần ta sẽ thấy thành phần có dạng 2D (chiều rộng và chiều cao), để nhìn vật thể 3D ta cần có thêm chiều sâu, thuộc tính perspective sẽ cho ta thấy được chiều sâu của thành phần, khoảng chiều sâu được tính từ điểm đặt ban đầu tới giá trị của perspective (theo đơn vị pixel). Cấu trúctag {
perspective: giá trị;
}perspective có các giá trị như sau:
HTML viết:
CSS viết:p {
background: #cc0000;
height: 100px;
width: 100px;
position: absolute;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
}Hiển thị trình duyệt khi chưa có perspective:Thêm thuộc tính perspective vào CSS:div {
perspective: 300;
-moz-perspective: 300;
-webkit-perspective: 300;
-o-perspective: 300;
-ms-perspective: 300;
}
p {
background: #cc0000;
height: 100px;
width: 100px;
position: absolute;
transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
}Hiển thị trình duyệt khi có perspective:
Transform 3D là gì?3 sử dụng giá trị 4 để 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úctag {
transform: perspective(đơn vị);
}Đơn vị của 4 có thể là pixel, em, ... Cách sử dụngHTML viết:
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: Ta sẽ thêm giá trị 4 để 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: Ta thấy thành phần 7 đã 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ác3D với phép quay trục Y p {
background: #7ACAFF;
height: 50px;
transform: perspective(145px) rotateY(40deg);
width: 120px;
}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;
}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 CSS3Tớ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é. Bài này mình sẽ hướng dẫn cách xài thuộc tính perspective, nhằm giúp cho một đối tượng 2D nhìn có vẻ 3D hơn. Để ví dụ, chúng ta sẽ tạo ra một đối tượng xoay vòng. File HTML: – Đầu tiên chúng ta có file HTML như thế này. Có thẻ div là “class_cha”, có thẻ div con là “class_con”. – Link file HTML này tới file hieuung.css. 0 Bước 1: Ở class con, bạn đặt thuộc tính là transform và gán giá trị rotate(độ xoay). Phía sau chữ rotate bạn có thể thêm X để xoay theo chiều ngang, và Y để đối tượng xoay theo chiều dọc.transform và gán giá trị rotate(độ xoay). Phía sau chữ rotate bạn có thể thêm X để xoay theo chiều ngang, và Y để đối tượng xoay theo chiều dọc. Bạn cũng phải đặt thêm thuộc tính transititon và gán giá trị là thời gian cho nó, để nó hiện ra chậm lại, thì mới thấy được.transititon và gán giá trị là thời gian cho nó, để nó hiện ra chậm lại, thì mới thấy được. 1 Giải thích: – Ở class cha mình đặt chiều rộng và chiều cao là 500px. – Ở class con mình tạo ra một đối tượng màu đen với kích thước bằng class cha (100%). – Để nó xoay, mình đặt transform và gán giá trị rotate, thêm Y vì muốn nó xoay theo chiều dọc, 360deg nghĩa là xoay vòng 360 độ. – Để nó xoay từ từ, mình đặt transtition và gán giá trị là 0.4 giây. Bước 2: Hiện tại nó chỉ là 1 đối tượng 2D, phẳng. Để nó xoay theo dạng 3D, bạn hãy thêm thuộc tính perspective và gán giá trị khoảng cách (px) ở class cha. 2 Giải thích: – Code giữ nguyên, mình chỉ thêm thuộc tính perspective vô class cha thôi. – Đặt thuộc tính perspective và gán giá trị là khoảng cách từ mắt bạn tới đối tượng. Ở đây mình gán là 500px. – Khoảng cách càng nhỏ thì nhìn nó càng nhô lồi ra, khoảng cách càng xa thì nhìn nó càng phẳng. Để dễ hiểu, bạn hãy lấy điện thoại tự chụp hình chính mình, nếu để camera gần thì nhìn mặt sẽ méo, còn để xa thì nhìn mặt chuẩn. Vậy khoảng cách bao nhiêu là phù hợp? Tùy theo sở thích của bạn thôi, bạn thử từ từ khi nào thấy đẹp là được. Mẹo: Thường người ta sẽ đặt khoảng cách perspective cao gấp 3 lần chiều cao của đối tượng. Ví dụ đối tượng của bạn cao 500px thì khoảng cách 1500px là hợp lý.
|
