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)

translate(x, y), translateUnitless(x, y)

• 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.

transform(transformObject), transformUnitless(transformObject)

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

transform

import transform from 'css-transform-string';

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

transformUnitless

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

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

translate

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

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

translateUnitless

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

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