Syntax¶

Description: matrix is defined as a helper utility that converts transformations into the matrix3d equivalent.

ctr('<#selector>', {
  <matrix>: {
    <transform:property>: <transform:value>
  }
})

<#selector>:
  <matrix>:
    <transform:property>: <transform:value>

<#selector> {
  transform: matrix3d(<....>);
}

Notes

• Red pills nom nom nom
• Check out Franklin Ta’s article, Computing CSS matrix3d transforms, as to why you might want and or need to use matrix3d
• MDN matrix3d()

Perspective¶

Description: The matrix Object can convert perspective transformations..

ctr('.test', {
  width: 200px
  matrix: {
    perspective: 600
  }
})

.test:
  width: 200px
  matrix:
    perspective: 600

.test {
  width: 200px;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1);
}

ctr('.test', {
  width: 200px
  matrix: {
    perspective: 600
  }
})

.test {
  width: 200px;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1);
}

.test:
  width: 200px
  matrix:
    perspective: 600

Notes

• Only accepts Number values
• MDN perspective

Rotate¶

Description: The matrix Object can convert rotate transformations.

ctr('.test', {
  width: 200px
  matrix: {
    rotate: 45deg
  }
})

.test:
  width: 200px
  matrix:
    rotate: 45deg

.test {
  width: 200px;
  transform: matrix3d(0.70710548, 0.70710808, 0, 0, -0.70710808, 0.70710548, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

ctr('.test', {
  width: 200px
  matrix: {
    rotate: 45deg
  }
})

.test {
  width: 200px;
  transform: matrix3d(0.70710548, 0.70710808, 0, 0, -0.70710808, 0.70710548, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

.test:
  width: 200px
  matrix:
    rotate: 45deg

Notes

• rotate transformations
  • rotate: a === rotateZ
  • rotateX: a
  • rotateY: a
  • rotateZ: a
  • rotate3d: x y z a
• Only accepts deg or rad values
• MDN rotate
• MDN rotateX
• MDN rotateY
• MDN rotateZ
• MDN rotate3d

Scale¶

Description: The matrix Object can convert scale transformations.

ctr('.test', {
  width: 200px
  matrix: {
    scale: 1.5 2
  }
})

.test:
  width: 200px
  matrix:
    scale: [1.5, 2]

.test {
  width: 200px;
  transform: matrix3d(1.5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

ctr('.test', {
  width: 200px
  matrix: {
    scale: 1.5 2
  }
})

.test {
  width: 200px;
  transform: matrix3d(1.5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

.test:
  width: 200px
  matrix:
    scale: [1.5, 2]

Notes

• Scale transformations
  • scale: x y
  • scaleX: x
  • scaleY: y
  • scaleZ: z
  • scale3d: x y z
• Only accepts Number values
• MDN scale
• MDN scaleX
• MDN scaleY
• MDN scaleZ
• MDN scale3d

Skew¶

Description: The matrix Object can convert skew transformations.

ctr('.test', {
  width: 200px
  matrix: {
    skew: 1.2 1.1
  }
})

.test:
  width: 200px
  matrix:
    skew: [1.2, 1.1]

.test {
  width: 200px;
  transform: matrix3d(1, 1.96475966, 0, 0, 2.57215162, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

ctr('.test', {
  width: 200px
  matrix: {
    skew: 1.2 1.1
  }
})

.test {
  width: 200px;
  transform: matrix3d(1, 1.96475966, 0, 0, 2.57215162, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

.test:
  width: 200px
  matrix:
    skew: [1.2, 1.1]

Notes

• Skew transformations
  • skew: x y
  • skweX: x
  • skweY: y
• Only accepts Number values
• MDN skew
• MDN skewX
• MDN skewY

Translate¶

Description: The matrix object can convert translate transformations.

ctr('.test', {
  width: 200px
  matrix: {
    translate: 100 200
  }
})

.test:
  width: 200px
  matrix:
    translate: [100, 200]

.test {
  width: 200px;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 200, 0, 1);
}

ctr('.test', {
  width: 200px
  matrix: {
    translate: 100 200
  }
})

.test {
  width: 200px;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 200, 0, 1);
}

.test:
  width: 200px
  matrix:
    translate: [100, 200]

Notes

• Translate transformations
  • translate: x y
  • translateX: x
  • translateY: y
  • translateZ: z
  • translate3d: x y z
• Only accepts Number values but you can use a px value for clarity
• MDN translate
• MDN translateX
• MDN translateY
• MDN translateZ
• MDN translate3d

Multiple¶

Description: The matrix Object can convert multiple transformations.

ctr('.test', {
  width: 200px
  matrix: {
    perspective: 600
    rotateX: 60deg
    rotateY: 45deg
    rotateZ: 60deg
    translateX: 200
  }
})

.test:
  width: 200px
  matrix:
    perspective: 600
    rotateX: 60deg
    rotateY: 45deg
    rotateZ: 60deg
    translateX: 200

.test {
  width: 200px;
  transform: matrix3d(0.35355124, 0.73919739, 0.5732266, -0.00095538, -0.61237218, -0.28033468, 0.73919739, -0.001232, 0.70710808, -0.61237218, 0.35355124, -0.00058925, 70.71024834, 147.83947838, 114.64532007, 0.80892447);
}

ctr('.test', {
  width: 200px
  matrix: {
    perspective: 600
    rotateX: 60deg
    rotateY: 45deg
    rotateZ: 60deg
    translateX: 200
  }
})

.test {
  width: 200px;
  transform: matrix3d(0.35355124, 0.73919739, 0.5732266, -0.00095538, -0.61237218, -0.28033468, 0.73919739, -0.001232, 0.70710808, -0.61237218, 0.35355124, -0.00058925, 70.71024834, 147.83947838, 114.64532007, 0.80892447);
}

.test:
  width: 200px
  matrix:
    perspective: 600
    rotateX: 60deg
    rotateY: 45deg
    rotateZ: 60deg
    translateX: 200

Notes

• I’m not a maths wizard like my little bro and calculations needed to convert multiple transformations was a bit harder than I had originally anticipated, so no maths guarantees
• My confidence interval: (A single "meh" + two beers) * thumbs-up