Transformações

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 23 de 43.

O transform do CSS permite que você altere a aparência de um elemento ao escalá-lo, rotacioná-lo, movê-lo (transladá-lo) ou incliná-lo. Essas alterações são aplicadas instantaneamente, a menos que sejam combinadas com transições.

scale() – Redimensionar um elemento (torná-lo maior ou menor).
rotate() – Girar o elemento por graus.

translate() – Move o elemento para a esquerda/direita ou para cima/baixo.
skew() – Inclina o elemento ao longo do eixo X ou Y.

Exemplos:

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

/* Rotaciona a caixa 45 graus no sentido horário */
.box {
  transform: rotate(45deg); 
}

/* Move o elemento 50px para a direita e 100px para baixo */
div {
  transform: translate(50px, 100px); 
}

/* Inclina o elemento 20 graus no eixo X e 10 graus no eixo Y */
div {
  transform: skew(20deg, 10deg); 
}

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Dada uma galeria com 4 imagens, cada uma com uma classe (img1, img2, etc.), aplique as seguintes transformações ao passar o mouse (on hover):

Imagem 1 (.img1): Use scale() para tornar a imagem 1.2 vezes maior ao passar o mouse.
Imagem 2 (.img2): Use rotate() para girar a imagem em 45 graus ao passar o mouse.
Imagem 3 (.img3): Use translate() para mover a imagem -5px para a direita e -3px para baixo ao passar o mouse.
Imagem 4 (.img4): Use skew() para inclinar a imagem em 20 graus no eixo X e 10 graus no eixo Y ao passar o mouse.

Folha de consulta

O transform do CSS permite que você altere a aparência de um elemento ao redimensioná-lo, rotacioná-lo, movê-lo (transladar) ou incliná-lo.

scale() – Redimensiona um elemento (torna-o maior ou menor)
rotate() – Rotaciona o elemento em graus
translate() – Move o elemento para a esquerda/direita ou para cima/baixo
skew() – Inclina o elemento ao longo dos eixos X ou Y

/* Torna a imagem 20% maior */
img {
  transform: scale(1.2); 
}

/* Rotaciona a caixa 45 graus no sentido horário */
.box {
  transform: rotate(45deg); 
}

/* Move o elemento 50px para a direita e 100px para baixo */
div {
  transform: translate(50px, 100px); 
}

/* Inclina o elemento 20 graus no eixo X e 10 graus no eixo Y */
div {
  transform: skew(20deg, 10deg); 
}

Experimente você mesmo

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

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.