Transform

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 23/43。

CSS transform を使用すると、要素を拡大縮小、回転、移動（平行移動）、または傾斜（スキュー）させることで、その外観を変更できます。これらの変更は、トランジションと組み合わせない限り、即座に適用されます。

scale() – 要素のサイズを変更します（大きくしたり小さくしたりします）。
rotate() – 要素を度数で回転させます。

translate() – 要素を左右または上下に移動させます。
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): scale() を使用して、ホバー時に画像を1.2倍に拡大します。
画像 2 (.img2): rotate() を使用して、ホバー時に画像を45度回転させます。
画像 3 (.img3): translate() を使用して、ホバー時に画像を右に -5px、下に -3px 移動させます。
画像 4 (.img4): skew() を使用して、ホバー時に画像をX軸方向に20度、Y軸方向に10度傾けます。

チートシート

CSSのtransformを使用すると、要素の拡大縮小、回転、移動（平行移動）、または傾斜（スキュー）によって、要素の外観を変更できます。

scale() – 要素のサイズを変更する（大きくしたり小さくしたりする）
rotate() – 要素を度数で回転させる
translate() – 要素を左右または上下に移動させる
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); 
}

自分で試してみよう

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

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。