Skip to content

Instantly share code, notes, and snippets.

@bcherny
Created September 17, 2013 04:23
Show Gist options
  • Save bcherny/6590055 to your computer and use it in GitHub Desktop.
Save bcherny/6590055 to your computer and use it in GitHub Desktop.
CSS transform functions and their matrix equivalents
/* translate */
> translate (x, y)
matrix(
1, 0, 0,
1, x, y
)
> translate3d (x, y, z)
matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
x, y, z, 1
)
/* scale */
> scale (x, y)
matrix(
x, 0, 0,
y, 0, 0
)
> scale3d(x, y, z)
matrix3d(
x, 0, 0, 0,
0, y, 0, 0,
0, 0, z, 0,
0, 0, 0, 1
)
/* skew */
> skew (x, y)
matrix(
1, tan(y), tan(x),
1, 0, 0
)
/* rotate */
> rotate (x)
matrix(
cos(x), sin(x), -sin(x),
cos(x), 0, 0
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment