트랜스폼

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

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

scale(): 요소의 크기를 조정합니다(더 크게 또는 더 작게 만듭니다).
rotate(): 요소를 각도만큼 회전합니다. 양수 값은 시계 방향으로, 음수 값은 시계 반대 방향으로 회전합니다.

translate(): 요소를 왼쪽/오른쪽 또는 위/아래로 이동합니다. 양수 값은 요소를 오른쪽(X)과 아래쪽(Y)으로 이동시키고, 음수 값은 왼쪽과 위쪽으로 이동시킵니다.
skew(): X축 또는 Y축을 따라 요소를 기울입니다.

예시:

/* 이미지를 20% 더 크게 만듭니다 */
img {
  transform: scale(1.2); 
}

/* 상자를 시계 방향으로 45도 회전시킵니다 */
.box {
  transform: rotate(45deg); 
}

/* 요소를 오른쪽으로 50px, 아래로 100px 이동합니다 */
div {
  transform: translate(50px, 100px); 
}

/* 요소를 X축 방향으로 20도, Y축 방향으로 10도 기울입니다 */
div {
  transform: skew(20deg, 10deg); 
}

챌린지

쉬움

4개의 이미지가 있는 갤러리가 주어졌습니다. 각 이미지에는 클래스(img1, img2 등)가 있습니다. 마우스를 올렸을 때 다음 변환을 적용하세요:

이미지 1 (.img1): 마우스를 올렸을 때 이미지가 1.2배 커지도록 scale()을 사용하세요.
이미지 2 (.img2): 마우스를 올렸을 때 이미지를 45도 회전하도록 rotate()를 사용하세요.
이미지 3 (.img3): 마우스를 올렸을 때 이미지를 오른쪽으로 -5px, 아래쪽으로 -3px 이동하도록 translate()를 사용하세요.
이미지 4 (.img4): 마우스를 올렸을 때 이미지를 X축으로 20도, Y축으로 10도 기울이도록 skew()를 사용하세요.

직접 해보기

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