CSS3の2次元変換を見る
の 変換モジュール CSS3での驚異的な追加機能は、Webサイト上の要素を次のレベルに操作する方法です。.
私を本当に驚かせるいくつかの実験があります、このような例。しかし、CSS専用のアイコンのように、どうにかしてオートボットに変身するようなものを作成するつもりはありません。それは、実に現実的にも使用できないためです。.
代わりに、今回は、CSS3の2次元変換の基本について検討し、基本レベルでどのように機能するかを確認します。.
構文
CSS3変換モジュールは、基本的に並進、拡大縮小、回転、傾斜などの要素をある程度変換することを可能にします。.
公式の構文は 変換：メソッド（値）. しかし、まだ初期段階にある他のCSS3のすばらしい追加のように、現在のブラウザはまだ変換を実行するために構文バージョンを必要とします。したがって、完全な構文は次のようになります。
変換：メソッド（値）。 / * W3C公式構文* / -o-transform：method（value）; / * Opera 10.5以降* / -ms-transform：メソッド（値）; / * Internet Explorer 9.0以降* / -moz-transform：method（value）; / * Firefox 3.6以降* / -webkit-transform：method（value）; / * Chrome / Safari 3.2以降* /
また、上記で参照している方法は 変換関数, 次のいずれかに置き換えられます。 translate（）, 規模（）, rotate（） または skew（）.
値
メソッドの値の大部分は X軸 そして Y軸. あなたが高校であなたの数学クラスからのデカルト座標系を覚えているならば、基本的な原則は非常に似ています、X軸は 水平 Y軸は 垂直 ライン.
回転を除く。の 回転 を使用します 極座標 0〜360の範囲の度数で表されます。.
すべてのメソッドの値は、負または正の両方になります。ただし、Webページは上から下に順番に読み取られるため、WebのY軸がデカルト座標の元の原理とは逆に機能するため、注意してください。これは、マイナスの値を Y軸, 代わりに一番上に移動します.
変換を使う
それでは、次の基本的なデモンストレーションを見てみましょう。.
私は翻訳します
用語に曇ってはいけません 翻訳する, 外国語は翻訳されません。の 翻訳する これは実際には要素をある方向に動かす方法です。.
このメソッドには2つの値があります。 バツ そして Y. の X値 上記で指摘したように、要素は水平になります。 左または右に, しながら Y 値は垂直方向に 下または上へ.
それでは、以下の簡単なデモを見てみましょう。
div width：100px;高さ：100ピクセル。変換：translate（100px、250px）;
上のスニペットは、100pxの要素を右に、250pxの要素を下に移動します。.
div width：100px;高さ：100ピクセル。変換：translate（100px、0）;
Y軸をゼロにしているので、上のスニペットは100pxの間要素をちょうど右に動かします。次に、要素を左に移動したい場合は、次のようにX軸を負に設定するだけです。
div width：100px;高さ：100ピクセル。変換：translate（-100px、0）;
- 「翻訳」デモ
あるいは、これらの個々の方法で要素を一方向に移動することができます。 translateX（） そして translateY（）, 違いは、これらのメソッドはそれぞれ1つの値しか受け入れないことです。.
実際には、 変換：変換（-100ピクセル、0） に等しい 変換：translateX（-100ピクセル）.
II - スケール
の 規模 方法は私達にすることを可能にします 拡大または縮小 実際のサイズの要素スケールの値は 翻訳する 上記の方法では、XとYも含まれます。唯一の違いは、単位を指定しないことです。これが一例です。
div width：100px;高さ：100ピクセル。変換：スケール（１．５）。
上記の例では、 div 1.5または 150％ 実際のサイズ, また、X方向とY方向の両方で均等に拡大縮小するため、1つの値で宣言するだけで済みます。このように宣言することもできます 変換：スケール（１．５、１．５）。 あなたがより詳細に行きたければ、それはちょうど同じことをするでしょう.
さらに、要素を減らしたい場合は、以下の例のように、0.999から絶対0までの値を使用します。これにより、divのサイズが50％または半分になります。
div width：100px;高さ：100ピクセル。変換：スケール（０．５）。
ただし、値を絶対値に設定する場合は注意が必要です。 “0” の div 消えてしまうので、正当な理由がない限り、それをすることはお勧めしません。.
- "スケール"デモ
III - 回転
この記事で前述したように、 回転させる メソッドは極座標を使用するので、値は度で表されます。これが2つの例です
下のスニペットは div 時計回りに30度.
div width：100px;高さ：100ピクセル。変換：回転（30度）。
下の例に示すように、負の値は div 反対方向（反時計回り）に同程度.
div width：100px;高さ：100ピクセル。変換：回転（-30度）;
- 「回転」デモ
IV - スキュー
の ゆがみ メソッドは平行四辺形のようなものを作成することを可能にします。また、X軸とY軸の2つの値も含まれています。ただし、値自体は、次のように使用されるような線形測定値ではなく、度数で表されます。 規模 または 翻訳する 方法。これが一例です。
div width：200px;高さ：100ピクセル。変換：スキュー（３０度、１０度）。
- "Skew"デモ
V - マルチプルメソッド
の 変形する propertyは1つのメソッドだけを扱うことに限定されていません。実際、次のように単一の宣言に複数のメソッドを含めることができます。
div width：100px;高さ：100ピクセル。変換：translateX（100px）rotate（45deg）;
上記のスニペットは、要素100pxを右に移動させると同時に45度回転させます。.
"Multiple Method"デモ.
原点を変換
の トランスフロムオリジン - その名前が示すように - は、変換の開始点を制御するために使用されます。次の構文でこのプロパティを明示的に宣言しないと 変換元：X Y;, ブラウザはデフォルト値のXを50％、Yを50％にします。.
今、私達が指定すれば 変換元 0（X）0（Y）に変換は左上から始まります.
繰り返しますが、すべてのブラウザは、このプロパティを呼び出すためにまだプレフィックスバージョンを必要とします。だから、ここでそれはそれがほとんどの現在のブラウザで動作することを保証するための完全版です：
-webkit-transform-origin：X Y; -moz-transform-origin：X Y; -o-transform-origin：X Y; -ms-transform-origin：X Y;変換元：X Y;
- "変換元"デモ
結論
私たちは4つの本質的な変換方法すべてを経験しました。並進、拡大縮小、回転、傾斜
ただし、前述したように、このモジュールはまだ初期段階にあるため、次のWebサイトでこれらの方法を適用する場合は、互換性のないブラウザに対して適切に機能が低下することを確認してください。.
最後に、以下のリンクからすべてのデモを見るかソースをダウンロードすることができます。.
- デモ
- ソースをダウンロード
