CSSのtransformを完全ガイド！初心者でもわかるscaleやrotateの動かし方

transformとの組み合わせで動きを出すテクニック（scale・rotateなど）

先生と生徒の会話形式で理解しよう

生徒

「ホームページのボタンを、マウスをのせたときに大きくしたり、少し回転させたりしてオシャレに動かしたいです！」

先生

「CSSのtransform（トランスフォーム）という命令を使えば、簡単に要素を拡大したり回転させたりできますよ。」

生徒

「初心者でも、数学のような難しい計算なしで動かせますか？」

先生

「もちろんです！直感的な言葉を使うだけなので、基本を覚えれば誰でも動きを作れます。一緒に学んでいきましょう！」

1. CSSのtransformとは？要素を変形させる魔法の命令

ウェブサイトを作るとき、通常は四角い箱を並べるようにレイアウトを作りますが、その「箱」を自由自在に変形させる命令がtransform（トランスフォーム）です。プログラミング未経験の方にとって「トランスフォーム」と聞くとロボットの変形を思い浮かべるかもしれませんが、ウェブ制作でも同じように「形や位置を変える」という意味で使われます。

例えば、ボタンにマウスをのせたときに少しだけ大きくしたり、画像を斜めに傾けたり、横にずらしたりといった動きが可能です。これらは、元々の配置を壊さずに、見た目だけを一時的に変化させることができるため、アニメーション効果を作るのに非常に適しています。

パソコンを触ったことがない方でも大丈夫です。難しい座標計算を自分でする必要はありません。コンピュータに「大きくして」「回して」といった簡単なキーワードを伝えるだけで、画面上の要素が魔法のように動き出します。

2. scaleを使って要素を大きくしたり小さくしたりする方法

もっともよく使われる変形がscale（スケール）です。これは、要素の大きさを倍率で指定して変更する命令です。例えば、元のサイズを「1」としたときに、「1.2」と指定すれば1.2倍に大きくなり、「0.8」と指定すれば0.8倍に小さくなります。

拡大・縮小の動きは、ユーザーがボタンに触れたことを直感的に伝える「フィードバック」として非常に優秀です。コピー用紙を拡大コピーしたり縮小コピーしたりする感覚に近いですね。CSSでは、この倍率を細かく設定できるため、ほんの少しだけ大きくして「浮かび上がった」ような演出をすることも可能です。

以下のコード例では、マウスをのせたときにボタンがふわっと1.2倍に大きくなる仕組みを作っています。滑らかに動かすために、前回の記事で学んだtransition（トランジション）も一緒に使っています。


<style>
    .zoom-box {
        width: 150px;
        height: 100px;
        background-color: #007bff;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 変化を0.3秒かけて滑らかにする */
        transition: 0.3s;
        cursor: pointer;
    }
    /* マウスをのせたときに1.2倍にする */
    .zoom-box:hover {
        transform: scale(1.2);
    }
</style>

<div class="zoom-box">大きくなるよ</div>

ブラウザ表示

3. rotateを使って要素をくるっと回転させる方法

次に紹介するのはrotate（ロテート）です。これは、要素を回転させるための命令です。角度を指定する際には「deg（デグ）」という単位を使います。これは日本語でいう「度（角度）」のことです。例えば、右に10度傾けたいときは「10deg」、一回転させたいときは「360deg」と書きます。

少しだけ傾ける（例えば2度から5度程度）と、手書きのメモを貼り付けたような「アナログ感」や「遊び心」を演出できます。また、アイコンをマウスホバーしたときにくるっと回すような動きは、サイトに楽しさをプラスしてくれます。

角度の指定では、マイナスの数字（-10degなど）を使うこともできます。プラスなら時計回り、マイナスなら反時計回りに回転します。アナログ時計の針を動かすようなイメージで、好きな角度を指定してみましょう。パソコン初心者の方でも、数字を書き換えるだけで変化を確認できるので楽しいですよ。


<style>
    .rotate-icon {
        width: 100px;
        height: 100px;
        background-color: #ffc107;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        transition: 0.5s;
        cursor: pointer;
    }
    /* マウスをのせたときに45度回転させる */
    .rotate-icon:hover {
        transform: rotate(45deg);
    }
</style>

<div class="rotate-icon">
    <i class="bi bi-star-fill"></i>
</div>

ブラウザ表示

4. translateを使って要素を上下左右にずらす方法

translate（トランスレート）は、要素を今の位置から上下左右に平行移動させる命令です。これもトランスフォームの仲間です。横方向の移動を「X」、縦方向の移動を「Y」として指定します。例えば、マウスをのせたときに少しだけ上に持ち上がるボタンは、この「translateY」を使って作られます。

なぜ元々の位置を変える設定を使わないのかというと、このトランスレート機能を使う方がパソコンの動作が軽く、スムーズにアニメーションするからです。移動距離は「px（ピクセル）」などの単位で指定します。10pxなら、定規で1センチ弱動かすような感覚です。

「上に動かす」ときは、マイナスの値（-5pxなど）を指定するのがこの世界の特徴です。画面の一番上が「0」で、下に行くほど数字が増えるという仕組みになっているためです。最初は戸惑うかもしれませんが、「上はマイナス」と覚えてしまえば簡単です。

5. 複数の動きを組み合わせてより魅力的に見せるコツ

これまでに学んだ「大きくする（scale）」と「回転させる（rotate）」を、一つの命令で同時に行うこともできます。書き方は簡単で、スペースを開けて並べるだけです。例えば、transform: scale(1.1) rotate(10deg); と書けば、大きくしながら傾けるという複雑な動きが完成します。

複数の動きを組み合わせることで、アニメーションに深みが出ます。単に大きくなるだけよりも、少し傾きながら大きくなる方が、より「生き生きとした」印象をユーザーに与えることができます。ただし、何でもかんでも組み合わせすぎると、画面がガチャガチャして見づらくなるので、やりすぎには注意が必要です。

プロの現場でも、これらの組み合わせは頻繁に使われます。まずは「拡大」＋「少しの回転」や、「移動」＋「拡大」といった、シンプルな組み合わせから試していき、自分が「気持ちいい」と感じる動きを探してみましょう。


<style>
    .multi-card {
        width: 150px;
        height: 150px;
        border: 2px solid #ccc;
        transition: 0.4s;
    }
    .multi-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* 大きくしながら少しだけ傾ける */
    .multi-card:hover {
        transform: scale(1.1) rotate(5deg);
        border-color: #e83e8c;
    }
</style>

<div class="multi-card">
    <img src="/img/sample120-120.jpg" alt="サンプル">
</div>

ブラウザ表示

6. skewを使って要素を斜めに歪ませるユニークな表現

少し上級者向けですが、skew（スキュー）という命令もあります。これは要素を「平行四辺形」のように斜めに歪ませる効果があります。角度（deg）で指定し、紙の端を指で押して横にずらすような歪みを作ることができます。

あまり頻繁に使う機能ではありませんが、例えばデザイン性の高い見出しや、一風変わった背景のアクセントなど、個性的なサイトを作りたいときに役立ちます。rotateが全体を回すのに対し、skewは形そのものをひし形のように変形させるのが違いです。

変形させる方向によって、skewX（横方向の歪み）やskewY（縦方向の歪み）を使い分けます。形がぐにゃっと曲がる様子は、初めて見ると少し不思議な感覚になるかもしれません。こうした「歪み」を隠し味として使うことで、洗練されたデザインに仕上がることがあります。

7. トランスフォームの起点を決めるtransform-origin

変形をさせるとき、「どこを中心に動かすか」ということも設定できます。これをtransform-origin（トランスフォーム・オリジン）と言います。標準では要素の「真ん中」が中心になっていますが、これを「左上」や「右下」に変えることができます。

例えば、ドアが開くような動きを作りたいときは、回転の中心を「右端」や「左端」にする必要があります。中心が真ん中のままだと、その場で回転するだけになってしまいますよね。設定には「left」「top」「bottom」「right」「center」といった分かりやすい単語を使います。

未経験の方は、まず「中心を変えられる場所がある」ということだけ知っておけば十分です。デフォルトの真ん中中心でも多くの場面で活躍しますが、特定の方向に伸びるような動きを作りたいときに、この設定を思い出してみてください。

8. 実際に動きを作る際の手順と書き方のまとめ

トランスフォームを使って動きを作る際は、以下の3ステップで進めます。

まず、変化させたい要素にtransitionを設定して、アニメーションを滑らかにする時間を確保します。
次に、その要素にマウスがのったときの設定（:hover）を作ります。
最後に、そのホバー設定の中にtransformを書き込みます。

この順番を守ることで、マウスをのせたときも、離したときも、どちらも綺麗に動くようになります。もしホバー側にしかトランジションを書いていないと、マウスを離した瞬間にパッと形が戻ってしまうので注意しましょう。

コンピュータは、私たちが書いた順番通りに命令を読み込みます。最初は一行ずつ丁寧に、スペルミスがないか確認しながら打ち込んでいきましょう。一度成功すれば、次からはもっと自由に自分好みの動きを足していけるようになります。


<style>
    .float-btn {
        display: inline-block;
        padding: 10px 30px;
        background-color: #28a745;
        color: white;
        text-decoration: none;
        border-radius: 50px;
        transition: transform 0.3s ease-out; /* 移動のアニメーションを指定 */
    }
    /* 上に動きながら、少しだけ横に広がる */
    .float-btn:hover {
        transform: translateY(-10px) scaleX(1.1);
    }
</style>

<a href="#" class="float-btn">ふわっと浮上するボタン</a>

ブラウザ表示

9. 3Dトランスフォームで奥行きのある動きを出す方法

CSSには、さらに進化させた3Dトランスフォームという世界もあります。これは、画面の奥や手前といった「奥行き」を感じさせる変形です。例えば、トランプを裏返すような動きや、キューブが回転するような表現が可能です。

これには「perspective（パースペクティブ）」という「視点」の設定が必要になります。遠近感をどれくらい出すかを指定するのですが、これを使うと単なる平面のウェブサイトが、立体的でインタラクティブな空間に変わります。少し難易度は上がりますが、使いこなせると非常にインパクトのあるサイトになります。

まずは今回学んだ平面（2D）の動きに慣れることが先決ですが、「CSSでは立体的な動きまで作れるんだ！」という可能性を知っておくだけでも、ウェブ制作がもっと楽しくワクワクするものに感じられるはずです。