Thuộc tính Transform scale

Written by

Bài này mình sẽ giới thiệu sơ qua về thuộc tính Transform scale.

Thuộc tính này giúp bạn tăng giảm tỉ lệ của một phần tử, thường được sử dụng để làm hiệu ứng phóng to khi di chuột.

Khi gán giá trị scale: 0 nghĩa là 0%, 0.5 nghĩa là 50%, 1 nghĩa là 100%, 2 nghĩa là 200%.

.class{
    transform: scale(0);
}

.class:hover{
    transform: scale(1);
}

Giải thích:

– Hover: Khi di chuột lên.

– Đầu tiên mình đặt scale là 0, nghĩa là bình thường thì nó không xuất hiện gì cả.

– Sau đó khi di chuột lên, mình đặt scale là 1, nghĩa là kích thước 100%.

Vậy đối tượng ẩn, nhưng khi di chuột lên nó sẽ hiện ra.

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.

Comments