Easily build CSS transform values with JavaScript.
MIT License
Easily build CSS transform values with JavaScript.
$ npm install easy-css-transform-builder
You can build transform values with a simple API.
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
| 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
import {
createCSSTransformBuilder,
properties,
} from 'easy-css-transform-builder';
createCSSTransformBuilder(units: object)
Create a Builder.
Example:
const builder = createCSSTransformBuilder({ length: 'em', angle: 'rad' });
builder({ translateY: 50 }); // translateY(50px)
properties: string[]
An array of supported property names.
console.log(properties);
// [
// "translateX",
// "translateY",
// "translateZ",
// ...
// ]
Because it's a simple API, it can be used in various environments.
import React, { Component } from 'react';
import { createCSSTransformBuilder } from 'easy-css-transform-builder';
const builder = createCSSTransformBuilder();
class MyComponent extends Component {
render() {
return (
<div style={{
background: '#efefef',
transform: builder({
translateX: 100,
translateY: -50,
rotate: 180
})
}}>
Easy build CSS transform values!!
</div>
);
}
}
See the CHANGELOG.md
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
Bugs, feature requests and comments are more than welcome in the issues.
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.