트랜스폼

Coddy HTML 여정의 CSS 마스터 섹션에 포함된 레슨. 43개 중 23번째.

CSS transform을 사용하면 요소를 확대/축소하거나, 회전하거나, 이동하거나(translate), 기울여서 요소의 모양을 변경할 수 있습니다. 이러한 변경 사항은 transition과 함께 사용하지 않는 한 즉시 적용됩니다.

scale(): 요소의 크기를 조정합니다(더 크게 또는 작게 만듭니다).
rotate(): 요소를 degrees만큼 회전합니다.

translate(): element를 왼쪽/오른쪽 또는 위/아래로 이동합니다.
skew(): X 또는 Y axis를 따라 element를 기울입니다.

예시:

/* 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); 
}

챌린지

쉬움

4개의 이미지가 있는 gallery가 주어졌으며, 각 이미지에는 class(img1, img2 등)가 있습니다. hover 시 다음 transform을 적용하세요:

Image 1(.img1): scale()을 사용하여 hover 시 이미지를 1.2배 더 크게 만드세요.
Image 2(.img2): rotate()를 사용하여 hover 시 이미지를 45 degrees 회전하세요.
Image 3(.img3): translate()를 사용하여 hover 시 이미지를 -5px만큼 right으로, -3px만큼 down으로 이동하세요.
Image 4(.img4): skew()를 사용하여 hover 시 X-axis에서 20 degrees, Y-axis에서 10 degrees만큼 이미지를 기울이세요.

직접 해보기

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