Easily build CSS transform values with JavaScript.
TypeScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

easy-css-transform-builder

Build Status npm version David License

Easily build CSS transform values with JavaScript.

Install

$ npm install easy-css-transform-builder

Usage

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)

API

You can set the following properties.

CSS 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

Exports

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",
//   ...
// ]

Example with React.js

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>
    );
  }
}

CHANGELOG

See the CHANGELOG.md

Contibute

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

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

Development

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