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

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 23 из 43.

CSS transform позволяет изменять внешний вид элемента с помощью масштабирования, поворота, перемещения (трансляции) или наклона. Эти изменения применяются мгновенно, если они не сочетаются с переходами.

scale() – Изменение размера элемента (увеличение или уменьшение).
rotate() – Поворот элемента на определенный градус.

translate() – Перемещает элемент влево/вправо или вверх/вниз.
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 при наведении.

Шпаргалка

CSS transform позволяет изменять внешний вид элемента путем масштабирования, поворота, перемещения (трансляции) или наклона.

scale() – изменение размера элемента (увеличение или уменьшение)
rotate() – поворот элемента на определенный градус
translate() – перемещение элемента влево/вправо или вверх/вниз
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); 
}

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

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

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.