Thuộc tính Perspective - Phối cả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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="hieuung.css">
</head>
<body>
    
    <div class="class_cha">
        
        <div class="class_con"></div>

    </div>

</body>
</html>

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.

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.

.class_cha {
    width: 500px;
    height: 500px;
}

.class_cha .class_con {
    background-color: black;
    width: 100%;
    height: 100%;
    transform: rotateY(360deg);
    transition: 0.4s;
}

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.

.class_cha {
    width: 500px;
    height: 500px;
    perspective: 500px;
}

.class_cha .class_con {
    background-color: black;
    width: 100%;
    height: 100%;
    transform: rotateY(360deg);
    transition: 0.4s;
}

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

Author
Recent Posts

Trần Thành

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.

Thuộc tính Perspective – Phối cảnh

Leave a Comment Cancel reply