Easily build CSS transform values with JavaScript.
npm install easy-css-transform-builder



> Easily build CSS transform values with JavaScript.
``bash`
$ npm install easy-css-transform-builder
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)
`
You can set the following properties.
* translateX: number | stringtranslateY
* : number | stringtranslateZ
* : number | stringtranslate
: [number 2] | stringtranslate3d
: [number 3] | stringscale
* : number | stringscale3d
: [number 3] | stringscaleX
* : number | stringscaleY
* : number | stringscaleZ
* : number | stringrotate
* : number | stringrotate3d
: [number 4] | stringrotateX
* : number | stringrotateY
* : number | stringrotateZ
* : number | stringskewX
* : number | stringskewY
* : number | stringperspective
* : number | stringmatrix
: [number 6] | stringmatrix3d
: [number 16] | string
`javascript`
import {
createCSSTransformBuilder,
properties,
} from 'easy-css-transform-builder';
Create a Builder.
Example:
`javascript
const builder = createCSSTransformBuilder({ length: 'em', angle: 'rad' });
builder({ translateY: 50 }); // translateY(50px)
`
An array of supported property names.
`javascript`
console.log(properties);
// [
// "translateX",
// "translateY",
// "translateZ",
// ...
// ]
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 buildCompile TypeScript and create type definitions.
####
npm run test`Run unit testing with Ava, And linting with TSLint.