Skip to content

css-matrix-transform.md

Latest commit

 

History

History
233 lines (206 loc) · 4.02 KB

css-matrix-transform.md

File metadata and controls

233 lines (206 loc) · 4.02 KB

CSS Transforms

Back{: .button}

Matrix to Matrix3D mapping

The 3x3 matrix $$ \begin{bmatrix} a & c & tx \ b & d & ty \ 0 & 0 & 1 \ \end{bmatrix} $$ it used for 2D transforms can be represented as $$ \begin{bmatrix} a & c & 0 & e \ b & d & 0 & f \ 0 & 0 & 1 & 0 \ 0 & 0 & 0 & 1 \end{bmatrix} $$ the 4x4 matrix used in 3D transforms as well

Translate

transform: translate3d(41px, 39px, 23px)
/* equivalent to */
transform: matrix3D(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41, 39, 23, 1)

$$ \begin{bmatrix} 1 & 0 & 0 & tx \ 0 & 1 & 0 & ty \ 0 & 0 & 1 & tz \ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ z \ 1 \end{bmatrix}

\begin{bmatrix} x + tx \ y + ty \ z + tz \ 1 \end{bmatrix} $$

Scale

transform: translate3d(1.5, 1.5, 1.5)
/* equivalent to */
transform: matrix3D(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1)

$$ \begin{bmatrix} sx & 0 & 0 & 0 \ 0 & sy & 0 & 0 \ 0 & 0 & sz & 0 \ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ z \ 1 \end{bmatrix}

\begin{bmatrix} x . sx \ y . sy \ z . sz \ 1 \end{bmatrix} $$

Skew

transform: skew(10deg, 10deg)
/* equivalent to */
/* tan(10deg) = 0.1763 */
transform: matrix3D(1, 0.1763, 0, 0, 0.1763, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

$$ \begin{bmatrix} 1 & tan(\alpha) & 0 & 0 \ tan(\beta) & 1 & 0 & 0 \ 0 & 0 & 1 & 0 \ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ z \ 1 \end{bmatrix}

\begin{bmatrix} x + y . tan(\alpha) \ x . tan(\beta) + y \ z \ 1 \end{bmatrix} $$

Rotation

RotateX

transform: rotateX(30deg)
/* equivalent to */
/* sin(30deg) = 0.5, cos(30deg) = 0.866 */
transform: matrix3D(1, 0, 0, 0, 0, 0.866, -0.5, 0, 0, 0.5, 0.866, 0, 0, 0, 0, 1)

$$ \begin{bmatrix} 1 & 0 & 0 & 0 \ 0 & cos(a) & -sin(a) & 0 \ 0 & sin(a) & con(a) & 0 \ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ z \ 1 \end{bmatrix}

\begin{bmatrix} x \ y.cos(a) - z.sin(a) \ y.sin(a) + z.cos(a) \ 1 \end{bmatrix} $$

RotateY

transform: rotateY(30deg)
/* equivalent to */
/* sin(30deg) = 0.5, cos(30deg) = 0.866 */
transform: matrix3D(0.866, 0, 0.5, 0, 0, 1, 0, 0, -0.5, 0, 0.866, 0, 0, 0, 0, 1)

$$ \begin{bmatrix} con(a) & 0 & sin(a) & 0 \ 0 & 1 & 0 & 0 \ -sin(a) & 0 & cos(a) & 0\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ z \ 1 \end{bmatrix}

\begin{bmatrix} x.cos(a) + z.sin(a) \ y \ z.cos(a) - x.sin(a) \ 1 \end{bmatrix} $$

RotateZ

transform: rotateZ(30deg)
/* equivalent to */
/* sin(30deg) = 0.5, cos(30deg) = 0.866 */
transform: matrix3D(0.866, -0.5, 0, 0, 0.5, 0.866, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1)

$$ \begin{bmatrix} cos(a) & -sin(a) & 0 & 1 \ sin(a) & con(a) & 0 & 0 \ 0 & 0 & 0 & 1 \ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ z \ 1 \end{bmatrix}

\begin{bmatrix} x.cos(a) - y.sin(a) \ x.sin(a) + y.cos(a) \ z \ 1 \end{bmatrix} $$

Rotate 3D

Just with rotateX, rotateY, rotateZ we will run into Gimbal Lock. So there is a Rotate 3D to rotate around the axis of rotation a vector

transform: rotate3D(1, 1, 1, 0)

$$ \begin{bmatrix} 1+(1-cos(a))(x^2-1) & z·sin(a)+xy(1-cos(a)) & -y·sin(a)+xz·(1-cos(a)) & 0 \\ -z·sin(a)+xy·(1-cos(a)) & 1+(1-cos(a))(y^2-1) & x·sin(a)+yz·(1-cos(a)) & 0 \\ ysin(a)+xz(1-cos(a)) & -xsin(a)+yz(1-cos(a)) & 1+(1-cos(a))(z2-1) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} $$

Reference