Transform

Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 23 / 43.

CSS transform, bir öğenin görünümünü ölçeklendirerek, döndürerek, hareket ettirerek (öteleyerek) veya eğerek değiştirmenizi sağlar. Geçişlerle birleştirilmediği sürece bu değişiklikler anında uygulanır.

scale(): Bir öğeyi yeniden boyutlandırır (daha büyük veya daha küçük yapar).
rotate(): Öğeyi derece cinsinden döndürür. Pozitif değerler saat yönünde, negatif değerler saat yönünün tersine döndürür.

translate(): Öğeyi sola/sağa veya yukarı/aşağı hareket ettirir. Pozitif değerler öğeyi sağa (X) ve aşağıya (Y), negatif değerler sola ve yukarıya hareket ettirir.
skew(): Öğeyi X veya Y ekseni boyunca eğik hâle getirir.

Örnekler:

/* Görseli 20% büyütür */
img {
  transform: scale(1.2); 
}

/* Kutuyu saat yönünde 45 derece döndürür */
.box {
  transform: rotate(45deg); 
}

/* Öğeyi 50px sağa ve 100px aşağı taşır */
div {
  transform: translate(50px, 100px); 
}

/* Öğeyi X ekseninde 20 derece ve Y ekseninde 10 derece eğir */
div {
  transform: skew(20deg, 10deg); 
}

Görev

Kolay

4 görselli bir galeri verildiğinde, her birine bir sınıf (img1, img2 vb.) atanmış olsun; fare üzerine getirildiğinde aşağıdaki dönüşümleri uygulayın:

Görsel 1 (.img1): Fare üzerine getirildiğinde görseli 1,2 kat büyütmek için scale() kullanın.
Görsel 2 (.img2): Fare üzerine getirildiğinde görseli 45 derece döndürmek için rotate() kullanın.
Görsel 3 (.img3): Fare üzerine getirildiğinde görseli sağa -5px ve aşağı -3px taşımak için translate() kullanın.
Görsel 4 (.img4): Fare üzerine getirildiğinde görseli X ekseninde 20 derece ve Y ekseninde 10 derece eğmek için skew() kullanın.

Kendin dene

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