Transformsですが、ちゃんと理解したかったので調べてみました。そんなに自信はありませんが、以前よりは理解できた気がします。いうわけなので、自分が分かる範囲で説明してみたいと思います。合わせて一つの仕様になるそうです。今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。Transforms(2011/03/21)新しくなった仕様が出ていましたので、リンクを追加しておきます。最新版へのリンクです。Transforms記事内容に若干の不安があるので、他力本願で申し訳ないですが間違っていたら教えていただけると助かります。Transformstransformプロパティどのような変形を行うかを指定します。指定はTransform関数で行います。関数は空白区切りにより複数指定できます。各関数は指定した順に適用されます。初期値はnoneです。ty)translate()では、要素の移動を行います。1つ目のパラメータでX方向への移動距離、2つ目のパラメータでY方向への移動距離を指定します。2つ目のパラメータtyが省略された場合、tyは0として計算されます。指定には<length>形式、または<percentage>を使用します。灰色の部分が変形適用前のもの、赤い部分が適用後のものとなります。translateY()translate()を個別に指定する関数です。translateX()はX方向へ、translateY()はY方向への移動距離を指定します。sy)要素の拡大縮小を行います。1つ目のパラメータでX方向の比率を、2つ目のパラメータでY方向の比率を指定します。2つ目のパラメータsyが省略された場合、syは1つ目のパラメータsxと同じ値として計算されます。指定には<number>形式を使用します。scaleY()scale()を個別に指定する関数です。scaleX()でX方向、scaleY()でY方向の比率を指定します。仮にscaleX()しか指定されていない場合、残るscaleY()の値は1となります。これは逆の場合でも同じです。rotate()要素を回転させます。回転の方向は時計回りです。回転の中心点はtransform-origin(後述)プロパティで指定されたポイントとなります。パラメータは1つだけで、<angle>形式で指定します。skewY()要素を傾斜させます。skewX()はX軸に沿って指定された分の傾斜を与えます。同様に、skewY()はY軸に沿います。パラメータは1つだけで、<angle>形式で指定します。f)行列を使用して変形を指定します。これ1つで上記の指定をまとめて行うこともできます。非常にややこしいのでCSSしか書かない人が使う機会は少ないかもしれませんが、JavaScriptで変形を操作するときには必要になってきたりします。rotate()やscale()などを使って書いたとしても、JavaScriptからtransformの値を取得すると、このmatrix()になるからです。使用される行列は3×3ですが、うち3つは固定です。変形なしの状態の行列はこうなります。この行列が何をするのかですが、この行列を使って座標を算出します。1)とし、これを行列に乗算して座標を出します。このx’とy’が変形後の座標になります。これを各頂点ごとに行い、それぞれの結果に応じて要素の頂点の座標を移動することで変形が行われます。20)すると、次のようになります。次に、ここまで出てきた関数を行列に変換してみます。translateY(ty)でも同様です。scaleY(sy)でも同様です。aは角度で、度数法(degree)ではなく弧度法(radian)で指定します。[rad]となります。aはrotate()のときと同じです。10px)といった指定があったとしましょう。この場合には、次のようになります。27.32051)となります。計算方法はめんどくさいので行列の乗算の方法を調べてください。calculator」などを使うと楽です。実際に試して見ましょう。1」の実行結果これを重ねてみます。2」の実行結果transform-originプロパティtransform-originでは、変形の原点を指定できます。指定には、<percentage>と<length>、キーワードが使えます。bottomとなります。値が1つしかない場合、2つ目の値はcenterとして扱われます。値が2つの場合、その値がキーワードでなければ、1つ目の値は水平方向、2つ目の値は垂直方向のものとして扱われます。<percentage>と<length>は、要素のボーダーボックスの左上隅からのオフセットを表します。値が3つ、または4つの場合、<percentage>や<length>の前にキーワードが先行する必要があります。20pxは、垂直方向が要素の下端から10px、水平方向が右端から20pxの位置になります。値が3つしかない場合、未指定のオフセットは0であるとみなされます。正の値は、ボーダーボックスの端から内側へのオフセットを、負の値はボーダーボックスの端から外側へのオフセットを表します。rotate(15deg)し、transform-originの値を変更したものです。Transformsについては以上です。CSSアニメーションとの絡み、DOMでの扱いなどは仕様に載っていますので参照してください。TransformsTransformsを使うことで、要素を2次元または3次元へ移動・回転・スケール変更することができます。transformは、奥行きのある表現を可能にします。3次元空間ではZ軸が追加され、その正の値はウィンドウからユーザー側に向かって伸びており、負の値はユーザー側からウィンドウに向かってより奥に伸びています。Z軸を真横から見た場合、ユーザー側が正の値、その逆が負の値となります。斜め上から見たらこんな感じです。文字が書かれているほうが負になります。Transformsで使われる3つの軸それと、ここから先で使うサンプルですが、変形の確認に使う基本のHTMLとCSSはこんな感じになっています。100px;}また、正面からだと変形したことが分かりにくいものもありますので、斜め上から見ているような感じにしていますが、画面上のほうにあるボタンで切り替えられます。軸も表示していますが、これも表示・非表示を切り替えられます。Transformsと同様、どのような変形を行うかを指定します。指定はTransform関数で行います。関数は空白区切りにより複数指定できます。各関数は指定した順に適用されます。初期値はnoneです。tz)3Dでの要素の移動を行います。指定には<length>形式、または<percentage>を使用しますが、Z方向では<length>のみが使用できます。灰色の部分が変形適用前のもの、赤い部分が適用後のものとなります。translateZ(tz)移動を個別に指定します。tz)と同じになります。パラメータには<length>または<percentage>ですが、translateZ()の場合<percentage>は使えません。sz)3Dでの要素の拡大縮小を行います。指定には<number>形式を使用します。1」の実行結果(正面から)X方向、Y方向への比率が変化しているのが分かります。Z軸については何も変化していないように見えます。Z方向へ拡大するからといって、要素に厚みが出るわけではありません。Z方向へ拡大したものをY軸を中心に少し回転させてみましょう。(回転については次の次のセクションからやります)回転のみで、比率の変化はなしZ方向への拡大X方向とZ方向への拡大と、なっています。2」の実行結果(正面から)回転されたものが、Z方向にも変化しているのが分かります。sz)はZ方向に変化のある要素のZ方向の比率が変更される、ということです。scaleZ(sz)scale3d()の各パラメータを個別に指定する関数です。sz)と同じになります。a)要素を3D回転させます。zで方向ベクトルを指定し、aで回転の角度を指定します。回転は時計回りに行われます。<angle>形式で記述します。1)と等しくなります。rotateZ(a)各ベクトルごとに回転を指定します。パラメータは<angle>形式で記述します。rotate3d()でまとめて指定しようとするとややこしいので、CSSを書く人はこちらをメインに使うことになるかと思います。rotateX(a)では、aに指定された角度だけ、X軸を基準に要素を時計回りに回転させます。a)と同じ変形となります。a)と同じ変形となります。回転の基準となる軸もそれぞれY軸・Z軸となります。回転の中心となるポイントはtransform-originで指定した座標になります。ay)要素を傾斜させます。1つ目のパラメータでX方向の、2つ目のパラメータでY方向の傾斜を指定します。2つ目のパラメータが指定されていない場合、0として扱われ、Y方向の変形は行われません。パラメータは<angle>形式で記述します。skewY(a)要素の傾斜をX方向、Y方向と個別に指定する関数です。パラメータは<angle>形式で記述します。a)と同じ変形となります。perspective(d)透視投影による指定をします。これを指定することにより、変形に遠近効果をつけることができます。遠くのものはより小さく、近くのものはより大きく、といった感じです。仕組みとしては、視点のポイントから要素の4つの各頂点を線で結び、その線のz=0の位置に描画されるものがブラウザで閲覧する変形後の要素となります。Zの位置が小さいほど、線同士が作る角度は狭くなるので、より小さく描画されます。このperspective()はz=0から視点ポイントまでの距離を指定します。綺麗な図が描けなかったので真横からの図になりますが、次のような感じです。TransformsでいうところのtranslateZ()だけを指定した要素で、結ばれている線は実際には頂点ごとに、つまり4本あると思ってください。「Z方向に対し正(負)の方向に移動した要素」自体の大きさは同じです。関数の指定については<length>形式で記述するとなっていますが、px以外で指定しているものを見たことがないです......。数値の大小による見え方の違いですが、数値が小さいほど遠近感が強く、大きいほど遠近感が弱くなります。指定する値は0より大きい値である必要があります。perspective()が指定されていない場合、要素の各頂点からz=0への線がz=0に対して垂直になるように投影されます。d4)行列による指定を行います。この行列は座標変換を行うためのものです。座標変換のやり方はは2Dのときと同じです。4×4の次のような行列を使います。変形なしだとこうなります。