transform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

transformCSS のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の視覚整形モデルの座標空間を変更します。

試してみましょう

このプロパティに none とは異なる値が設定されていると、重ね合わせコンテキストが作成されます。この場合、その要素はその中に含まれる position: fixed; または position: absolute; であるすべての要素の包含ブロックとして扱われます。

警告: 座標変換可能な要素のみが transform の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、置換要素でないインラインボックス表の列ボックス表の列グループボックスを除くすべての要素です。

構文

css
/* キーワード値 */
transform: none;

/* 関数値 */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 複数の関数値 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* グローバル値 */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

transform プロパティには、キーワード値 none か 1 つ以上の <transform-function> の値のいずれかが指定されます。

<transform-function>

適用される 1 つ以上の CSS 座標変換関数です。座標変換関数は、左から右へ順に重ねられ、つまり右から左の順に座標変換の合成の効果が適用されます

none

座標変換を何も適用しないことを指定します。

アクセシビリティ

拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。

また、 prefers-reduced-motion メディア特性を使用することを検討してください。これを使用してメディアクエリーを書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。

詳しくは以下の文書を参照してください。

公式定義

初期値none
適用対象座標変換可能要素
継承なし
パーセント値囲みボックスの寸法に対する相対値
計算値指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類座標変換
重ね合わせコンテキストの生成あり

形式文法

transform = 
none |
<transform-list>

<transform-list> =
<transform-function>+

要素の移動と回転

HTML

html
<div>座標変換された要素</div>

CSS

css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

結果

座標変換の順序

座標変換関数の順番は重要です。この例では、 2 つのボックスが同じ値で回転および平行移動されています。座標変換関数の順序だけが異なっています。

HTML

html
<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>

CSS

css
.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

結果

要素が平行移動される前に回転された場合、平行移動の方向は回転された軸になります。この軸は点線で示されています。

その他の例

その他の例は、CSS 座標変換の使用および <transform-function> をご覧ください。

仕様書

Specification
CSS Transforms Module Level 2
# transform-functions
CSS Transforms Module Level 1
# transform-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報