Transform

Part of the CSS Mastery section of Coddy's HTML journey — lesson 23 of 43.

CSS transform lets you change the appearance of an element by scaling, rotating, moving (translating), or skewing it. These changes are applied instantly unless combined with transitions.

scale() – Resize an element (make it bigger or smaller).
rotate() – Rotate the element by degrees.

translate() – Move the element left/right or up/down.
skew() – Slant the element along the X or Y axis.

Examples:

/* Makes the image 20% larger */
img {
  transform: scale(1.2); 
}

/* Rotates the box 45 degrees clockwise */
.box {
  transform: rotate(45deg); 
}

/* Moves the element 50px to the right and 100px down */
div {
  transform: translate(50px, 100px); 
}

/* Skews the element 20 degrees on the X axis and 10 degrees on the Y axis */
div {
  transform: skew(20deg, 10deg); 
}

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Given a gallery with 4 images, each with a class (img1, img2, etc.), apply the following transformations on hover:

Image 1 (.img1): Use scale() to make the image 1.2 times bigger when hovered.
Image 2 (.img2): Use rotate() to rotate the image by 45 degrees when hovered.
Image 3 (.img3): Use translate() to move the image -5px to the right and -3px down when hovered.
Image 4 (.img4): Use skew() to slant the image by 20 degrees on the X-axis and 10 degrees on the Y-axis when hovered.

Cheat sheet

CSS transform lets you change the appearance of an element by scaling, rotating, moving (translating), or skewing it.

scale() – Resize an element (make it bigger or smaller)
rotate() – Rotate the element by degrees
translate() – Move the element left/right or up/down
skew() – Slant the element along the X or Y axis

/* Makes the image 20% larger */
img {
  transform: scale(1.2); 
}

/* Rotates the box 45 degrees clockwise */
.box {
  transform: rotate(45deg); 
}

/* Moves the element 50px to the right and 100px down */
div {
  transform: translate(50px, 100px); 
}

/* Skews the element 20 degrees on the X axis and 10 degrees on the Y axis */
div {
  transform: skew(20deg, 10deg); 
}

Try it yourself

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

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.