Трансформации

Часть раздела Мастерство CSS путешествия по HTML на Coddy. Урок 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); 
}

/* Наклоняет элемент на 20 градусов по оси X и на 10 градусов по оси Y */
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(), чтобы при наведении наклонить изображение на 20 градусов по оси X и на 10 градусов по оси Y.

Попробуйте сами

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