变换

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 23 课，共 43 课。

CSS transform 可以通过缩放、旋转、移动（平移）或倾斜元素来改变它的外观。除非与过渡效果结合使用，否则这些变化会立即生效。

scale()：调整元素的大小（放大或缩小）。
rotate()：按角度旋转元素。正值表示顺时针旋转，负值表示逆时针旋转。

translate()：向左/向右或向上/向下移动元素。正值会让元素向右（X 轴）和向下（Y 轴）移动，负值会让元素向左和向上移动。
skew()：沿 X 轴或 Y 轴倾斜元素。

示例：

/* 将图片放大 20% */
img {
  transform: scale(1.2); 
}

/* 将盒子顺时针旋转 45 度 */
.box {
  transform: rotate(45deg); 
}

/* 将元素向右移动 50px，向下移动 100px */
div {
  transform: translate(50px, 100px); 
}

/* 使元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度 */
div {
  transform: skew(20deg, 10deg); 
}

挑战

简单

给定一个包含 4 张图片的图库，每张图片都有一个类（img1、img2 等），请在悬停时应用以下变换：

图片 1（.img1）：使用 scale()，在悬停时将图片放大到原来的 1.2 倍。
图片 2（.img2）：使用 rotate()，在悬停时将图片旋转 45 度。
图片 3（.img3）：使用 translate()，在悬停时将图片向右移动 -5px，向下移动 -3px。
图片 4（.img4）：使用 skew()，在悬停时让图片沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度。

亲手试试

<!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>