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

Perspective

Description: The matrix Object can convert perspective transformations..

Edit
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

Rotate

Description: The matrix Object can convert rotate transformations.

Edit
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

Scale

Description: The matrix Object can convert scale transformations.

Edit
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

Skew

Description: The matrix Object can convert skew transformations.

Edit
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

Translate

Description: The matrix object can convert translate transformations.

Edit
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

Multiple

Description: The matrix Object can convert multiple transformations.

Edit
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