Transformasi

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 23 dari 43.

CSS transform memungkinkan kamu mengubah tampilan elemen dengan memperbesar atau memperkecil, memutar, memindahkan, atau memiringkannya. Perubahan ini diterapkan secara langsung, kecuali jika digabungkan dengan transisi.

scale(): Mengubah ukuran elemen (memperbesar atau memperkecil).
rotate(): Memutar elemen berdasarkan derajat. Nilai positif memutarnya searah jarum jam, nilai negatif memutarnya berlawanan arah jarum jam.

translate(): Geser elemen ke kiri/kanan atau ke atas/bawah. Nilai positif menggesernya ke kanan (X) dan ke bawah (Y), nilai negatif menggesernya ke kiri dan ke atas.
skew(): Miringkan elemen sepanjang sumbu X atau Y.

Contoh:

/* Memperbesar gambar sebesar 20% */
img {
  transform: scale(1.2); 
}

/* Memutar kotak 45 derajat searah jarum jam */
.box {
  transform: rotate(45deg); 
}

/* Geser elemen 50px ke kanan dan 100px ke bawah */
div {
  transform: translate(50px, 100px); 
}

/* Memiringkan elemen sebesar 20 derajat pada sumbu X dan 10 derajat pada sumbu Y */
div {
  transform: skew(20deg, 10deg); 
}

Tantangan

Mudah

Dengan galeri yang memiliki 4 gambar, masing-masing dengan class (img1, img2, dan seterusnya), terapkan transformasi berikut saat diarahkan:

Gambar 1 (.img1): Gunakan scale() agar gambar menjadi 1.2 kali lebih besar saat diarahkan.
Gambar 2 (.img2): Gunakan rotate() untuk memutar gambar sebesar 45 derajat saat diarahkan.
Gambar 3 (.img3): Gunakan translate() untuk menggeser gambar sejauh -5px ke kanan dan -3px ke bawah saat diarahkan.
Gambar 4 (.img4): Gunakan skew() untuk memiringkan gambar sebesar 20 derajat pada sumbu X dan 10 derajat pada sumbu Y saat diarahkan.

Coba sendiri

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