Biến đổi

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 23 trên 43.

CSS transform cho phép bạn thay đổi diện mạo của một phần tử bằng cách phóng to, thu nhỏ, xoay, di chuyển hoặc làm nghiêng phần tử đó. Những thay đổi này được áp dụng ngay lập tức, trừ khi kết hợp với hiệu ứng chuyển tiếp.

scale(): Thay đổi kích thước phần tử (phóng to hoặc thu nhỏ).
rotate(): Xoay phần tử theo số độ. Giá trị dương xoay theo chiều kim đồng hồ, giá trị âm xoay ngược chiều kim đồng hồ.

translate(): Di chuyển phần tử sang trái/phải hoặc lên/xuống. Giá trị dương di chuyển phần tử sang phải (X) và xuống dưới (Y), giá trị âm di chuyển phần tử sang trái và lên trên.
skew(): Làm nghiêng phần tử theo trục X hoặc Y.

Ví dụ:

/* Làm hình ảnh lớn hơn 20% */
img {
  transform: scale(1.2); 
}

/* Xoay hộp 45 độ theo chiều kim đồng hồ */
.box {
  transform: rotate(45deg); 
}

/* Di chuyển phần tử sang phải 50px và xuống dưới 100px */
div {
  transform: translate(50px, 100px); 
}

/* Làm nghiêng phần tử 20 độ theo trục X và 10 độ theo trục Y */
div {
  transform: skew(20deg, 10deg); 
}

Thử thách

Dễ

Với thư viện ảnh gồm 4 ảnh, mỗi ảnh có một lớp (img1, img2, v.v.), hãy áp dụng các phép biến đổi sau khi di chuột lên ảnh:

Ảnh 1 (.img1): Dùng scale() để phóng ảnh lên 1.2 lần khi di chuột lên ảnh.
Ảnh 2 (.img2): Dùng rotate() để xoay ảnh 45 độ khi di chuột lên ảnh.
Ảnh 3 (.img3): Dùng translate() để dịch ảnh sang phải -5px và xuống dưới -3px khi di chuột lên ảnh.
Ảnh 4 (.img4): Dùng skew() để làm nghiêng ảnh 20 độ trên trục X và 10 độ trên trục Y khi di chuột lên ảnh.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="img1">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="img2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="img3">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="img4">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>