css-transform-string

Create css transform strings in javascript or typescript using functions instead manual string manipulation.


Browser support

This package uses:

* ES6
* Object.entries

API

The module exports the following named exports. The default export is the transform function.

* transform(_transformObject_)
* transformUnitless(_transformObject_)
* translate(x, y)
* translateUnitless(x, y)

$3

* x: number | string
* y: number | string

One might wonder why this is the only transform property that has its own utility. The reason is that I at some point found that 90% of the time I was just using the utility to do translates. Constantly doing transform({ translate: [1, 2] }) got cumbersome, so I decided to add translate.

$3

Both function accept the same transform object. transformUnitless will not add any units to the output string.

* transformObject: object
* x: number | string,
* y: number | string,
* z: number | string
* translate: number | string | array (number | string)
* translate3d: number | string | array (number | string)
* scale: number | array (number)
* scaleX: number
* scaleY: number
* scaleZ: number
* scale3d: number | array (number)
* rotate: number | string
* rotateX: number | string
* rotateY: number | string
* rotateZ: number | string
* skew: number | string | array (number | string)
* skewX: number | string
* skewY: number | string
* perspective: number | string
* returns: string

Returns css string of the input object (all properties optional).

Examples

$3

``js
import transform from 'css-transform-string';

transform({ x: 50, y: '50%', rotateX: 10, rotateY: '1rad' });
// "translateX(50px) translateY(50%) rotateX(10deg) rotateY(1rad)"
`

$3

`js
import { transformUnitless } from 'css-transform-string';

transformUnitless({ x: 50, y: '50%', rotateX: 10, rotateY: '1rad' });
// "translateX(50) translateY(50%) rotateX(10) rotateY(1rad)"
`

$3

`js
import { translate } from 'css-transform-string';

translate(50, '50%');
// "translate(50px, 50%)"
`

$3

`js
import { translateUnitless } from 'css-transform-string';

translateUnitless(50, '50%');
// "translate(50, 50%)"
``