アフィン変換の skew は CSS や JavaScript ライブラリによって変換行列が異なる場合があるため、注意が必要です。

1. CSS の skew

CSS における変換行列は

\begin{pmatrix}
1 & \tan(a_x) & 0 \\
\tan(a_y) & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

となっています。

$\cos\theta = 0$ となる角度 $\theta$ は (理論上は) 指定不可です。

$a_x$ のみや $a_y$ のみの変形を行った場合に変形を行っていない方向の座標に影響しないメリットがありますが、変換後の scale に影響するため注意が必要です。

例えば $a_y = 0$ のときアフィン変換は

\begin{pmatrix}
1 & \tan(a_x) & 0 \\
0 & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
x \\
y \\
1 \\
\end{pmatrix}

=

\begin{pmatrix}
x + y \tan(a_x) \\
y \\
1 \\
\end{pmatrix}

となり、$y$ が変化しないことが分かります。

$a_x = - \theta \land a_y = \theta$ のとき変換行列は

\begin{pmatrix}
1 & \tan(- \theta) & 0 \\
\tan\theta & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

=

\begin{pmatrix}
\cos\theta & - \sin\theta & 0 \\
\sin\theta & \cos\theta & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
\dfrac1{\cos\theta} & 0 & 0 \\
0 & \dfrac1{\cos\theta} & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

となり、($\cos\theta \ne 0$ のとき $\left| \dfrac1{\cos\theta} \right| \geqq 1$ より) 通常の回転より大きくなることが分かります。

参考「skew() - CSS: カスケーディングスタイルシート | MDN」

2. 一部の JavaScript ライブラリの skew

一部の JavaScript ライブラリにおける変換行列は

\begin{pmatrix}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

=

\begin{pmatrix}
\cos(a_y) & - \sin(- a_x) & 0 \\
\sin(a_y) & \cos(- a_x) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

となっています。

$\cos\theta = 0$ となる角度 $\theta$ も指定可能です。

変換後の scale に影響しないメリットがありますが、$a_x$ のみや $a_y$ のみの変形を行った場合に変形を行っていない方向の座標に影響するため注意が必要です。

$a_x = - \theta \land a_y = \theta$ のとき変換行列は

\begin{pmatrix}
\cos\theta & - \sin\theta & 0 \\
\sin\theta & \cos\theta & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

となり、通常の回転と一致することが分かります。

例えば $a_y = 0$ のときアフィン変換は

\begin{pmatrix}
1 & \sin(a_x) & 0 \\
0 & \cos(a_x) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
x \\
y \\
1 \\
\end{pmatrix}

=

\begin{pmatrix}
x + y \sin(a_x) \\
y \cos(a_x) \\
1 \\
\end{pmatrix}

となり、$y$ が変化することが分かります。

参考「setTransform - pixijs/src/maths/matrix/Matrix.ts at v8.13.1 · pixijs/pixijs」
参考「decompose - pixijs/src/maths/matrix/Matrix.ts at v8.13.1 · pixijs/pixijs」

3. skew の挙動を合わせる

skew の角度はそのままで、scale を調整することで同じ挙動にすることが可能です。

ただし、$\cos\theta = 0$ となる角度 $\theta$ は理論上は別途処理すべきです (CSS や JavaScript では正確に $\cos\theta = 0$ とならずに計算可能な場合もあります) 。

一部の JavaScript ライブラリで CSS と同じ挙動にするには scale を拡大して

\begin{pmatrix}
1 & \tan(a_x) & 0 \\
\tan(a_y) & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

=

\begin{pmatrix}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
\dfrac1{\cos(a_y)} & 0 & 0 \\
0 & \dfrac1{\cos(a_x)} & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

とします。

CSS 等で一部の JavaScript ライブラリと同じ挙動にするには scale を縮小して

\begin{pmatrix}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

=

\begin{pmatrix}
1 & \tan(a_x) & 0 \\
\tan(a_y) & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
\cos(a_y) & 0 & 0 \\
0 & \cos(a_x) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

とします。

const toString = ({ a, b, c, d }) => [a, b, c, d].map(x => x.toFixed(6)).join(', ');

const ax = Math.PI / 6;
const ay = Math.PI / 3;

const matrixA = new DOMMatrixReadOnly([
	1, Math.tan(ay),
	Math.tan(ax), 1,
	0, 0,
]);

const matrixB = new DOMMatrixReadOnly([
	Math.cos(ay), Math.sin(ay),
	Math.sin(ax), Math.cos(ax),
	0, 0,
]);

console.log(toString(
	matrixA,
));
console.log(toString(
	matrixB.scale(1 / Math.cos(ay), 1 / Math.cos(ax)),
));

console.log(toString(
	matrixA.scale(Math.cos(ay), Math.cos(ax)),
));
console.log(toString(
	matrixB,
));

1.000000, 1.732051, 0.577350, 1.000000
1.000000, 1.732051, 0.577350, 1.000000
0.500000, 0.866025, 0.500000, 0.866025
0.500000, 0.866025, 0.500000, 0.866025