easy-css-transform-builder

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";

Create a Builder.

units: {Object}
return: {}

Example:

const builder = createCSSTransformBuilder({ length: "em", angle: "rad" })

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

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

Released under the MIT Licence

tsuyoshiwada

Thank you for your interest in easy-css-transform-builder.js. Bugs, feature requests and comments are more than welcome in the issues.

Before you open a PR:

Be careful to follow the code style of the project. Run npm test after your changes and ensure you do not introduce any new errors or warnings. All new features and changes need documentation.

Thanks!