Thuộc tính Transform origin – Lấy điểm gốc – Blog Kênh Tin Học

Posted on by mtoplistChuyên mục:Top List

Thuộc tính này giúp tạo một điểm neo (gốc) cho đối tượng. Giả sử bạn muốn tạo hiệu ứng mở cửa thì bạn sẽ neo nó ở một mép cửa để làm bản lề.

Để hiểu thuộc tính này, chúng ta sẽ làm ví dụ tạo một đối tượng mà khi di chuột lên nó sẽ xoay 90 độ, neo ở góc trên cùng tay trái.

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-origin và gán giá trị là %, số đầu tiên là bên trái (left), số thứ hai là trên cùng (top).

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

.class_cha .class_con{
    background-color: black;
    width: 100%;
    height: 100%;
    transition: 0.4s;
    transform-origin: 0% 0%;
}

Giải thích:

– Ở class cha mình mình đặt chiều rộng và cao là 500px.

Lý do cần class cha là để khi di chuột lên thì nó vẫn có tác dụng. Nếu không có class cha thì khi bạn di chuột lên, class con đã di chuyển đi mất, vậy là thành ra không còn di chuột, nó sẽ trở lại như cũ, khi về như cũ thì vô tình lại di chuột, nó sẽ bị giựt giựt (chạy tới chạy lui).

– Ở class con mình đặt đối tượng màu đen, chiều rộng và chiều cao bằng class cha (100%).

– Mình đặt thuộc tình transform-origin và gán giá trị left (trái) là 0%, giá gị top (trên) là 0%. Như vậy là nó sẽ lấy điểm trên cùng tay trái làm gốc.

Bước 2:

Làm hiệu ứng xoay khi di chuột lên.

Bạn đặt thuộc tính ở class con nhưng hover ở class cha, có nghĩa là khi di chuột lên thằng cha thì thằng con bị ảnh hưởng.

Ở class con mình đặt thuộc tính transform và gán giá trị là rotate 90deg, để nó xoay 90 độ khi di chuột lên.

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

.class_cha .class_con{
    background-color: black;
    width: 100%;
    height: 100%;
    transition: 0.4s;
    transform-origin: 0% 0%;
}

.class_cha:hover .class_con{
    transform: rotate(90deg);
}

Giải thích:

– Rotate có thể gán là X để xoay theo chiều ngang, Y để xoay theo chiều dọc, ở đây mình không ghi gì hết có nghĩa là xoay theo chiều Z (xoay phẳng 2D).

Xem thêm: Thuộc tính Transform rotate – Xoay tròn

mtoplist