CSS3 transform matrix 2D

  • 1

    matrix( 0.5, 0, 0, 1, 0, 0 )

  • 2

    matrix( 1, 0, 0, 0.5, 0, 0 )

  • 3

    matrix( 1, 0, 0, 1, -20, 0 )

  • 4

    matrix( 1, 0, 0, 1, 0, -20 )

  • 5

    matrix( 1, 0.5, 0, 1, 0, 0 )

  • 6

    matrix( 1, 0, 0.5, 1, 0, 0 )

  • 7

    scale( 0.5, 1 )

  • 8

    scale( 1, 0.5 )

  • 9

    translate( -20px, 0 )

  • 10

    translate( 0, -20px )

  • 11

    skew
    createMatrix( null, Math.tan( 0.5 ) )

  • 12

    skew
    createMatrix( null, null, Math.tan( 0.5 ) )

  • 13

    scaleX( 0.5 )

  • 14

    scaleY( 0.5 )

  • 15

    translateX( -20px )

  • 16

    translateY( -20px )

  • 17

    skewY( 29deg )

  • 18

    skewX( 0.5rad )