translateX()

CSS の translateX() 関数は、要素を指定した量だけ水平方向に移動します。具体的には、正または負の値に応じて、要素を右または左にずらします。

.parent:hover .box {
  transform: translateX(50%);
}

他の transform 関数と同様に、transform プロパティ内で使用されます。

CSS Transforms Module Level 1 ドラフトで定義されています。

Syntax

translateX() 関数の構文は次のとおりです:

<translateX()> = translateX( <length-percentage> )

平易な言葉で言うと: この要素をこの量だけ水平方向に移動（または変換）します。

Arguments

/* <length> */
translateY(80px) /* 要素が下方向に 80px 移動 */
translateY(-24ch) /* 要素が上方向に 24ch 移動 */

/* <percentage> */
translateY(50%) /* 要素が要素の高さの 50% 分下方向に移動 */
translateY(-100%) /* 要素が要素の高さの 100% 分上方向に移動 */

translateX() 関数は、要素をどの程度、どの方向（負の値で左、正の値で右）に移動するかを指定する単一の <length-percentage> 引数を取ります。

渡される引数は <length> または <percentage> のいずれかです:

• <length>: 正の値（例: 50px）の場合、要素は右に 50 ピクセル移動します。一方、-40ch の場合は、要素は左に 40 文字分移動します。
• <percentage>: パーセント値は要素の幅を基準とします。したがって、幅が 400px の要素で translateX(50%) を指定すると右に 200px 移動し、translateX(-50%) を指定すると左に 200px 移動します。

Basic usage

translateX() 関数を使って、さまざまな方法で要素を Web ページにスライドインさせることができます。たとえば、メニュー ボタンをクリックすると左（または右）からスライドインするサイドバーなどです。これを実現するには、まずサイドバーをページの外に完全にずらしておきます:

.sidebar {
  transform: translateX(-100%);
  transition: transform 0.2s ease-in;
}

次に、少しの JavaScript で、ユーザーがメニュー ボタンをクリックするたびに .open クラスをトグルします。これにより、サイドバーが左からページ内に移動します:

.sidebar.open {
  transform: translateX(0);
}

Example: Infinite marquee

Web 開発における marquee（マーキー）は、自動的にスクロールする情報バナー コンポーネントです。ほとんどの Web サイトでは、企業ロゴやスポンサー、クライアントの表示、あるいはこの例のように e コマース サイトでの新着情報の告知に使用されます。

前述の例と同様に、translateX() 関数を使って marquee コンポーネントをスムーズにスクロールさせることができます:

.marquee-content {
  animation: marquee-scroll 20s linear infinite;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

marquee-scroll キーフレームは、コンポーネントが開始段階から停止段階までスクロールする方法を定義し、コンポーネントが幅の半分だけ左方向にシフトします。

無限にスクロールさせるため、animation 簡略プロパティで animation-iteration-count を infinite に設定します。

Example: Skeleton layout animation

Skeleton loaders は、メイン コンテンツが読み込まれて置き換わるまでのプレースホルダーとして機能し、予期しないレイアウト シフトを防ぎます。元のコンテンツの形状やサイズに合わせた静的な灰色の div にすることもできますし、シマー効果を加えてより興味深いものにすることもできます。

::after 疑似要素を使って、デフォルトで transform: translateX(-120%); を設定し、shimmer アニメーションを使って .skeleton コンポーネント全体を無限に移動させることができます。

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;

  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, var(--skel-highlight), transparent);
  animation: shimmer 1.15s linear infinite;
}

shimmer キーフレームは、疑似要素を -120%（左から要素の外へ）から 120%（右からページの外へ）へ移動させ、その後繰り返します。

@keyframes shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

It doesn’t affect other elements

translateX() 関数は、他の transform 関数と同様に、ドキュメント フローには影響しません。代わりに、周囲の要素や新しい位置の要素を押し出すことなく、変換された要素を視覚的に新しい位置にずらします。また、要素が元々占めていたスペースは、まるで移動していないかのようにレイアウト上に予約されたままになります。

/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translateX(80px);
}

「Translated」要素が移動しても、Box 1 や Box 3 の要素がシフトしないことに注目してください。

margin が reflow を引き起こしたり、隣接する要素をシフトさせたりするのに対し、translate は要素が視覚的に描画される位置のみを変更します。

Issues with pointer pseudo-classes

translateX() を :hover のようなポインター疑似クラスに直接適用すると、インタラクションが壊れることがあります。要素が大きく移動してカーソルから離れた場合、:hover 状態が失われ、要素が即座に元の位置に戻ってしまうことがあります。初期位置ではカーソルがあるため、再び変換され、連続したちらつきループが発生します。

この問題の簡単な解決策は、変換する要素を親コンテナ内に配置し、疑似クラス（:hover）を親要素に適用し、メイン要素に translate 関数を適用することです。

/* Problem case */
.bad:hover {
  transform: translateX(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateX(160px);
}

Specification

CSS の translateX() 関数は、現在 Editor’s Drafts 段階にある CSS Transforms Module Level 1 で定義されています。

Browser support

translateX() 関数は、すべてのモダン ブラウザーでベースライン サポートされています。