Transform

Coddy'nin HTML Journey'sinin CSS Mastery 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, taşıyarak (translating) veya eğrilterek (skewing) değiştirmenize olanak tanır. Bu değişiklikler, geçişlerle (transitions) birleştirilmediği sürece anında uygulanır.

scale() – Bir öğeyi yeniden boyutlandırın (daha büyük veya daha küçük yapın).
rotate() – Öğeyi derece cinsinden döndürün.

translate() – Öğeyi sola/sağa veya yukarı/aşağı taşıyın.
skew() – Öğeyi X veya Y ekseni boyunca eğin.

Örnekler:

/* Resmi %20 daha büyük yapar */
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ğer */
div {
  transform: skew(20deg, 10deg); 
}

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Görev

Kolay

4 görselden oluşan ve her birinin bir sınıfı (img1, img2, vb.) olan bir galeri verildiğinde, üzerine gelindiğinde (hover) aşağıdaki dönüşümleri uygulayın:

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

Kopya kağıdı

CSS transform bir öğenin görünümünü ölçeklendirerek, döndürerek, taşıyarak (çevirerek) veya eğerek değiştirmenize olanak tanır.

scale() – Bir öğeyi yeniden boyutlandırın (büyütün veya küçültün)
rotate() – Öğeyi derece cinsinden döndürün
translate() – Öğeyi sola/sağa veya yukarı/aşağı taşıyın
skew() – Öğeyi X veya Y ekseni boyunca eğin

/* Resmi %20 daha büyük yapar */
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ğer */
div {
  transform: skew(20deg, 10deg); 
}

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>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.