BLOG

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

2026.06.19 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実践例10選
ここにCodePenのEmbedコードを貼り付けます。Pen作成後、このブロックと埋め込みタグを差し替えてください。

CodePenでPenを作成したら、上の枠をEmbedコードへ差し替えてください。各カードへマウスを乗せると10種類の動きを確認できます。

HTML

<main class="transform-demo">
  <article class="example example-1"><span>01</span><strong>translate</strong></article>
  <article class="example example-2"><span>02</span><strong>scale</strong></article>
  <article class="example example-3"><span>03</span><strong>rotate</strong></article>
  <article class="example example-4"><span>04</span><strong>skew</strong></article>
  <article class="example example-5"><span>05</span><strong>lift</strong></article>
  <article class="example example-6"><span>06</span><strong>button</strong></article>
  <article class="example example-7"><span>07</span><strong>flip</strong></article>
  <article class="example example-8"><span>08</span><strong>zoom image</strong></article>
  <article class="example example-9"><span>09</span><strong>underline</strong></article>
  <article class="example example-10"><span>10</span><strong>combined</strong></article>
</main>

CSS

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 32px;
  background: #f2f2f2;
  color: #111;
  font-family: system-ui, sans-serif;
}

.transform-demo {
  width: min(100%, 960px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.example {
  position: relative;
  display: grid;
  place-content: center;
  min-height: 180px;
  overflow: hidden;
  border: 2px solid #111;
  border-radius: 16px;
  background: #fff;
  box-shadow: 6px 6px 0 #ffd329;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.example span {
  position: absolute;
  top: 12px;
  left: 14px;
  color: #ff2f63;
  font-weight: 900;
}

.example strong {
  transition: transform .3s ease;
}

.example-1:hover strong { transform: translateX(18px); }
.example-2:hover strong { transform: scale(1.35); }
.example-3:hover strong { transform: rotate(12deg); }
.example-4:hover strong { transform: skewX(-14deg); }

.example-5:hover {
  transform: translateY(-10px);
  box-shadow: 6px 16px 0 #ffd329;
}

.example-6:active {
  transform: scale(.94);
  box-shadow: 2px 2px 0 #ffd329;
}

.example-7 {
  perspective: 700px;
}
.example-7:hover strong {
  transform: rotateY(180deg);
}

.example-8::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1f85ff, #00c9a7);
  transition: transform .45s ease;
}
.example-8:hover::before {
  transform: scale(1.16);
}
.example-8 strong,
.example-8 span {
  z-index: 1;
  color: #fff;
}

.example-9 strong {
  position: relative;
}
.example-9 strong::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 4px;
  background: #ff2f63;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.example-9:hover strong::after {
  transform: scaleX(1);
  transform-origin: left;
}

.example-10:hover strong {
  transform: translateY(-8px) rotate(-5deg) scale(1.18);
}

@media (prefers-reduced-motion: reduce) {
  .example,
  .example *,
  .example::before,
  .example::after {
    transition: none !important;
  }
}

JS

// JavaScriptは不要です。
// 各カードへマウスを乗せるか、タップして動きを確認してください。

よくある失敗

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