一般に（翻訳）、回転（ローテーション）、スキュー（傾き）、スケール（ズーム）メソッドを変換された変換CSS3プロパティに変換されます。トランスフォームの原点を別の文法を持つプロパティの値を、変換、それは変換変換-原点とを使用しなければならない、ということは注目に値する、これも名前から、さまざまなアクションのセットを変換するために設定されていることを確認することができません基準点。 デフォルトでは、ボックスの中心要素として要素の参照点の操作 。、底そう9の合計こと|中央| |右の三つの値は、垂直方向に3があり、すなわちトップ|センター9は、位置の値を設定することができる変換、横方向は左。
構文：
変換-起源：[<パーセント> | <長さ> | 左| center①| 右]、[<パーセント> | <長さ> | トップ| center②| 下]？
- デフォルト：50％〜50％、効果は中央センターに相当します
- アプリケーション：すべてのブロック要素と特定の要素インライン
値：
- <パーセンテージ>：パーセント値は、座標を指定しました。それは否定することができます。
- <長さ>：長さの値は、座標値を指定しました。それは否定することができます。
- 左：指定横軸の原点が残っています
- center①：横軸の中心の起源を特定します
- 右：横軸の原点は右で指定
- トップ：指定原点座標トップ
- center②：指定原点縦センター
- 下：指定原点座標底
説明：
- オブジェクトを設定または取得家に変換。
- この属性は、2つのパラメータを提供します。
- 2つの第二のための横軸、縦軸の最初の1つが。
- 横軸のための一つの値だけならば、縦軸は、50％がデフォルトになります。
- transformOriginに対応するスクリプトプロパティ。
互換性：
transformプロパティを
デフォルトでは、変形要素50％のX軸およびY軸の要素の中心に原点を、以下に示すように：
場合我々は、元の位置の変換原点変化素子、シフトの回転のCSS変形を使用ズームおよび他の操作が中心（変形原点）の位置に要素自体を変形させるために行われるものではありません。しかし、非常に頻繁に操作を変形異なる位置にある要素の必要性は、私たちが位置変化の要素の原点に変換-起源を使用することができ、要素の中心位置は、原点の所望の位置を達成するための要素の起源ではありません。
ルックスは変換-起源と同様の値の背景位置の値を。簡単には、あなたが言及キーワードおよびパーセント値を比較することができ、覚えておきます：
- トップ=トップ中心=中心トップ= 50％0
- 右=右中央=中央右= 100％或（100％、50％）
- ボトム=底中心=中央底= 50％100％
- 左=左中央=中央= 0或（0〜50％）、左
- 中心=中心センター= 50％（50％〜50％）
- トップは左=左上= 0 0
- 右上=右上= 100％0
- 右下=右下= 100％、100％
- 左下=左下= 0 100％
）ために、我々は一目で理解できるように、回転する回転する以下のスクリーンショットは、（の変換は、例えば、値および変換原点効果は同じではない：
中央の変換由来の値（又は中央センタ、または50％、または50％ 50％）：
トップの値（または上部中央または中央上部50％または0）原点の変換：
変換原点値は、右（又は右中央又は中央右、100％または100％、または50％）です。
変換由来の底の値（または下部中央又は中央下、50％または100％）。
変換原点値は左（または中心または中央左または0、または050パーセントを左）されます。
左上（左最上部または00）の変換に起源を値：
変換原点の右上部（上部右、または100％または0）の値を：
変換原点値は、右下の（または右下、100％または100％）です。
変換由来の値は、底（または左下又は0〜100％）が残っています。
