translate(tx, ty)

translate() では、要素の移動を行います。
1つ目のパラメータで X 方向への移動距離、2つ目のパラメータで Y 方向への移動距離を指定します。
2つ目のパラメータ ty が省略された場合、ty は 0 として計算されます。
指定には <length> 形式、または <percentage> を使用します。

以下はサンプルです。
灰色の部分が変形適用前のもの、赤い部分が適用後のものとなります。

transform:translate() sample

.sample1 {
  transform: translate(0);
}

.sample2 {
  transform: translate(20px);
}

.sample3 {
  transform: translate(20px, 20px);
}

translateX() と translateY()

translate() を個別に指定する関数です。
translateX() は X 方向へ、translateY() は Y 方向への移動距離を指定します。

scale(sx, sy)

要素の拡大縮小を行います。
1つ目のパラメータで X 方向の比率を、2つ目のパラメータで Y 方向の比率を指定します。
2つ目のパラメータ sy が省略された場合、sy は1つ目のパラメータ sx と同じ値として計算されます。
また、指定には <number> 形式を使用します。

transform:scale() sample

.sample1 {
  transform: scale(0);
}

.sample2 {
  transform: scale(1.2);
}

.sample3 {
  transform: scale(1.2, 0.8);
}

scaleX() と scaleY()

scale() を個別に指定する関数です。
scaleX() で X 方向、scaleY() で Y 方向の比率を指定します。
仮に scaleX() しか指定されていない場合、残る scaleY() の値は 1 となります。これは逆の場合でも同じです。

rotate()

要素を回転させます。回転の方向は時計回りです。
回転の中心点は transform-origin (後述) プロパティで指定されたポイントとなります。
パラメータは1つだけで、<angle> 形式で指定します。

transform:rotate() sample

.sample1 {
  transform: rotate(0);
}

.sample2 {
  transform: rotate(15deg);
}

.sample3 {
  transform: rotate(-15deg);
}

skewX(), skewY()

要素を傾斜させます。
skewX() は X 軸に沿って指定された分の傾斜を与えます。同様に、skewY() は Y 軸に沿います。
パラメータは1つだけで、<angle> 形式で指定します。

transform:skewX() & transform:skewY() sample

.sample1 {
  transform: skewX(0);
}

.sample2 {
  transform: skewX(15deg);
}

.sample3 {
  transform: skewY(15deg);
}

matrix(a, b, c, d, e, f)

行列を使用して変形を指定します。これ1つで上記の指定をまとめて行うこともできます。
非常にややこしいので CSS しか書かない人が使う機会は少ないかもしれませんが、JavaScript で変形を操作するときには必要になってきたりします。CSS で rotate() や scale() などを使って書いたとしても、JavaScript から transform の値を取得すると、この matrix() になるからです。

この関数には6つのパラメータがあり、変形なしの状態だと matrix(1, 0, 0, 1, 0, 0) となります。

使用される行列は 3×3 ですが、うち3つは固定です。

変形なしの状態の行列はこうなります。

この行列が何をするのかですが、この行列を使って座標を算出します。
要素の4つの頂点(矩形なので)を、それぞれ (X, Y, 1) とし、これを行列に乗算して座標を出します。

これを計算します。

この x’ と y’ が変形後の座標になります。
これを各頂点ごとに行い、それぞれの結果に応じて要素の頂点の座標を移動することで変形が行われます。

たとえば、100×100 の要素を translate(10, 20) すると、次のようになります。
上から順に、左上・右上・左下・右下の頂点です。

次に、ここまで出てきた関数を行列に変換してみます。

.sample1 {
  transform: rotate(30deg) scale(2) translate(10px, 10px);
}

.sample2 {
  transform: matrix(1.73205, 1, -1, 1.73205, 7.32051, 27.32051);
}

translate3d(tx, ty, tz)

3D での要素の移動を行います。
指定には <length> 形式、または <percentage> を使用しますが、Z 方向では <length> のみが使用できます。

以下はサンプルです。
灰色の部分が変形適用前のもの、赤い部分が適用後のものとなります。

transform:translate3d() sample

.sample1 {
  transform: translate3d(20px, 0, 0);
}

.sample2 {
  transform: translate3d(0, 20px, 0);
}

.sample3 {
  transform: translate3d(0, 0, 50px);
}

translateX(tx), translateY(ty), translateZ(tz)

移動を個別に指定します。
translateX(tx) は translate3d(tx, 0, 0) と同じです。
同様に、translateY(ty) は translate3d(0, ty, 0) と同じ、translateZ(tz) は translate3d(0, 0, tz) と同じになります。

パラメータには <length> または <percentage> ですが、translateZ() の場合 <percentage> は使えません。

scale3d(sx, sy, sz)

3D での要素の拡大縮小を行います。指定には <number> 形式を使用します。

transform:scale3d() sample 1

.sample1 {
  transform: scale3d(1.5, 1, 1);
}

.sample2 {
  transform: scale3d(1, 1.5, 1);
}

.sample3 {
  transform: scale3d(1, 1, 1.5);
}

X 方向、Y 方向への比率が変化しているのが分かります。ですが、Z 軸については何も変化していないように見えます。Z 方向へ拡大するからといって、要素に厚みが出るわけではありません。
では、Z 方向へ拡大したものを Y 軸を中心に少し回転させてみましょう。
(回転については次の次のセクションからやります)

1. 回転のみで、比率の変化はなし
2. Z 方向への拡大
3. X 方向と Z 方向への拡大

と、なっています。

transform:scale3d() sample 2

.sample1 {
  transform: scale3d(1, 1, 1) rotateY(45deg);
}

.sample2 {
  transform: scale3d(1, 1, 1.5) rotateY(45deg));
}

.sample3 {
  transform: scale3d(1.5, 1, 1.5) rotateY(45deg);
}

回転されたものが、Z 方向にも変化しているのが分かります。
scale3d(1, 1, sz) は Z 方向に変化のある要素の Z 方向の比率が変更される、ということです。

scaleX(sx), scaleY(sy), scaleZ(sz)

scale3d() の各パラメータを個別に指定する関数です。
scaleX(sx) は scale3d(sx, 1, 1) と、scaleY(sy) は scale3d(1, sy, 1) と、 scaleZ(sz) は scale3d(1, 1, sz) と同じになります。

rotate3d(x, y, z, a)

要素を 3D 回転させます。
x, y, z で方向ベクトルを指定し、a で回転の角度を指定します。回転は時計回りに行われます。
回転は transform-origin で指定したポイントを基準に行われまれ、角度の指定は <angle> 形式で記述します。

またこの関数は、matrix3d(1+(1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1+(1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1+(1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1) と等しくなります。

transform:rotate3d() sample

.sample1 {
  transform: rotate3d(1, 0, 0, 45deg);
}

.sample2 {
  transform: rotate3d(0, 1, 0, 45deg);
}

.sample3 {
  transform: rotate3d(0, 0, 1, 45deg);
}

rotateX(a), rotateY(a), rotateZ(a)

各ベクトルごとに回転を指定します。パラメータは <angle> 形式で記述します。
rotate3d() でまとめて指定しようとするとややこしいので、CSS を書く人はこちらをメインに使うことになるかと思います。

rotateX(a) では、a に指定された角度だけ、X 軸を基準に要素を時計回りに回転させます。
rotateX(a) は rotate3d(1, 0, 0, a) と同じ変形となります。

同様に rotateY(a) は rotate3d(0, 1, 0, a) と rotateZ(a) は rotate3d(0, 0, 1, a) と同じ変形となります。
回転の基準となる軸もそれぞれ Y 軸・Z 軸となります。

回転の中心となるポイントは transform-origin で指定した座標になります。

transform:rotateX() rotateY() rotateZ() sample

.sample1 {
  transform: rotateX(45deg);
}

.sample2 {
  transform: rotateY(45deg);
}

.sample3 {
  transform: rotateZ(45deg);
}

skew(ax, ay)

要素を傾斜させます。
1つ目のパラメータで X 方向の、2つ目のパラメータで Y 方向の傾斜を指定します。
2つ目のパラメータが指定されていない場合、0 として扱われ、Y 方向の変形は行われません。 パラメータは <angle> 形式で記述します。

transform:skew() sample

.sample1 {
  transform: skew(30deg, 0);
}

.sample2 {
  transform: skew(0, 30deg);
}

.sample3 {
  transform: skew(30deg, 30deg);
}

skewX(a), skewY(a)

要素の傾斜を X 方向、Y 方向と個別に指定する関数です。
パラメータは <angle> 形式で記述します。

skewX(a) は skew(a, 0) と skewY(a) は skew(0, a) と同じ変形となります。

perspective(d)

透視投影による指定をします。これを指定することにより、変形に遠近効果をつけることができます。遠くのものはより小さく、近くのものはより大きく、といった感じです。

仕組みとしては、視点のポイントから要素の4つの各頂点を線で結び、その線の z=0 の位置に描画されるものがブラウザで閲覧する変形後の要素となります。
たとえば Z の位置が小さいほど、線同士が作る角度は狭くなるので、より小さく描画されます。
この perspective() は z=0 から視点ポイントまでの距離を指定します。

綺麗な図が描けなかったので真横からの図になりますが、次のような感じです。
CSS Transforms でいうところの translateZ() だけを指定した要素で、結ばれている線は実際には頂点ごとに、つまり4本あると思ってください。
「Z 方向に対し正(負)の方向に移動した要素」自体の大きさは同じです。

関数の指定については <length> 形式で記述するとなっていますが、px 以外で指定しているものを見たことがないです……。
数値の大小による見え方の違いですが、数値が小さいほど遠近感が強く、大きいほど遠近感が弱くなります。

指定する値は 0 より大きい値である必要があります。

また、Perspective が指定されていない場合、要素の各頂点から z=0 への線が z=0 に対して垂直になるように投影されます。

transform:perspective() sample

.sample1 {
  transform: translateZ(50px);
}

.sample2 {
  transform: perspective(200px) translateZ(50px);
}

.sample3 {
  transform: perspective(500px) translateZ(50px);
}

.sample4 {
  transform: rotateY(45deg)
}

.sample5 {
  transform: perspective(200px) rotateY(45deg)
}

.sample6 {
  transform: perspective(500px) rotateY(45deg)
}

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

行列による指定を行います。この行列は座標変換を行うためのものです。
座標変換のやり方はは 2D のときと同じです。

この関数は16個のパラメータがあり、変形なしの状態だと matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) となります。

matrix3d() では 4×4 の次のような行列を使います。

変形なしだとこうなります。

ちなみに、matrix(a, b, c, d, e, f) を matrix3d() で表すと、matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1) となります。