CONTACT PRIVACY POLICY
HOME / BLOG
BLOG

コピペで使えるtransform実践例10選

BLOG

transformは、要素を移動、拡大縮小、回転、傾斜させるCSSプロパティです。レイアウト上の元の位置を保ったまま見た目を変形できるため、ホバー、ボタン、カード、画像、ナビゲーションなど幅広いUIで使えます。

この記事では、コピペして使える実践例を10種類紹介します。最後に、10種類を一度に試せるCodePen用コードも掲載しています。

transformの基本

.element {
  transform: translateX(20px);
  transform: scale(1.1);
  transform: rotate(8deg);
  transform: skewX(-10deg);
}

複数の関数は一つのtransformへ並べて書けます。ただし、変形関数は左から順に座標空間へ作用するため、記述順を変えると見た目も変わります。

/* 結果は同じではない */
.item-a { transform: translateX(40px) rotate(15deg); }
.item-b { transform: rotate(15deg) translateX(40px); }

1. 横へスライドする

.link:hover .icon {
  transform: translateX(6px);
}

2. ホバーで拡大する

.thumbnail {
  transition: transform .35s ease;
}
.thumbnail:hover {
  transform: scale(1.08);
}

3. アイコンを回転する

.refresh:hover svg {
  transform: rotate(360deg);
}

4. 見出しを少し傾ける

.heading:hover {
  transform: skewX(-10deg);
}

5. カードを持ち上げる

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgb(0 0 0 / .16);
}

6. ボタンを押し込む

.button:active {
  transform: scale(.96);
}

7. カードを裏返す

.flip-card {
  perspective: 800px;
}
.flip-card:hover .inner {
  transform: rotateY(180deg);
}

8. 画像だけズームする

.media {
  overflow: hidden;
}
.media img {
  transition: transform .45s ease;
}
.media:hover img {
  transform: scale(1.12);
}

9. 下線を左右へ伸ばす

.nav-link::after {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

10. 移動・回転・拡大を組み合わせる

.badge:hover {
  transform: translateY(-8px) rotate(-5deg) scale(1.16);
}

CodePen

よくある失敗

  • transformを別々のルールで上書きする：translateとscaleを別々に書くと、後の指定だけが残ります。
  • 関数の順番を意識しない：移動後に回転するか、回転後に移動するかで結果が変わります。
  • inline要素へそのまま使う：通常の非置換インライン要素では期待どおり変形できないため、inline-blockなどにします。
  • transform-originを調整しない：回転、拡大、下線アニメーションの起点が不自然になります。
  • ホバーでレイアウトを動かす：カードを拡大する時は周囲へ重ならない余白を確保します。
  • 強いズームを常時繰り返す：読みにくさや体調への影響を避け、モーション軽減設定へ対応します。

パフォーマンスとアクセシビリティ

transformとopacityは、位置や寸法を直接変えるプロパティよりアニメーションに使いやすい傾向があります。ただし、要素数が多い、ぼかしや影を大量に重ねる、常時動かし続ける、といった実装では負荷が増えます。

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
    transform: none;
  }
}

まとめ

transformは、リンクの矢印、ボタン、カード、画像、ナビ下線など、UIの小さな反応を作るのに便利です。まずはtranslate、scale、rotateを覚えれば、ほとんどの基本表現を作れます。

複数の変形を組み合わせる時は記述順、回転や拡大ではtransform-origin、アニメーションではprefers-reduced-motionを確認してください。

参考資料

このシリーズの記事

次に読む記事

STEP BACK