easy-css-transform-builder


> Easily build CSS transform values with JavaScript.

Install

``bash
$ npm install easy-css-transform-builder
`




Usage

You can build transform values with a simple API.

`javascript
import { createCSSTransformBuilder } from 'easy-css-transform-builder';

const builder = createCSSTransformBuilder({
length: 'px',
angle: 'deg',
});

const transform = builder({
translateX: 30,
scale: 2.8,
rotate3d: [1, 0, 0, 60],
skewY: '40rad',
});

console.log(transform);
// translateX(30px) scale(2.8) rotate3d(1, 0, 0, 60deg) skewY(40rad)
`




API

You can set the following properties.




$3

* translateX: number | string
* translateY: number | string
* translateZ: number | string
translate: [number 2] | string
translate3d: [number 3] | string
* scale: number | string
scale3d: [number 3] | string
* scaleX: number | string
* scaleY: number | string
* scaleZ: number | string
* rotate: number | string
rotate3d: [number 4] | string
* rotateX: number | string
* rotateY: number | string
* rotateZ: number | string
* skewX: number | string
* skewY: number | string
* perspective: number | string
matrix: [number 6] | string
matrix3d: [number 16] | string




$3

`javascript
import {
createCSSTransformBuilder,
properties,
} from 'easy-css-transform-builder';
`




$3

Create a Builder.

Example:

`javascript
const builder = createCSSTransformBuilder({ length: 'em', angle: 'rad' });

builder({ translateY: 50 }); // translateY(50px)
`




$3

An array of supported property names.

`javascript
console.log(properties);
// [
// "translateX",
// "translateY",
// "translateZ",
// ...
// ]
`

Example with React.js

Because it's a simple API, it can be used in various environments.

`javascript
import React, { Component } from 'react';
import { createCSSTransformBuilder } from 'easy-css-transform-builder';

const builder = createCSSTransformBuilder();

class MyComponent extends Component {
render() {
return (



);
}
}
`

CHANGELOG

See the CHANGELOG.md

Contibute

1. Fork it!
1. Create your feature branch: git checkout -b my-new-feature
1. Commit your changes: git commit -am 'Add some feature'
1. Push to the branch: git push origin my-new-feature
1. Submit a pull request :muscle:

Bugs, feature requests and comments are more than welcome in the issues.




$3

We will develop using the following npm scripts.


#### npm run build

Compile TypeScript and create type definitions.


#### npm run test`

Run unit testing with Ava, And linting with TSLint.

License

MIT © tsuyoshiwada