css-transform-builder
v1.3.0
Published
make css transform format string.
Downloads
357
Readme
css-transform-builder
class base
import CSSTransformBuilder from "css-transform-builder";
const transform = new CSSTransformBuilder().scale(1, 2);
console.log(transform.toString());
// => "scale(1,2)"
const transform2 = transform.translate(10, 10);
console.log(transform2.toString());
// => "scale(1,2) translate(10px,10px)"
const transform3 = new CSSTransformBuilder().rotate(20).translateY(10, "%");
console.log(transform3.toString());
// => "rotate(20deg) translateY(10%)"
const customFunc: CustomUnit<"vw"> = (n) => `${n * 2}vw`;
const transform4 = new CSSTransformBuilder().translate(10, 10, customFunc);
console.log(transform4.toString());
// => "translate(20vw,20vw)"
const transform5 = new CSSTransformBuilder().translateY("10%");
console.log(transform5.toString());
// => "translateY(10%)"
const transform6 = new CSSTransformBuilder().translateX([["20px", "+", "10px"], "+", ["20px", "+", "10px"]]);
console.log(transform6.toString());
// => "translateX(calc((20px + 10px) + (20px + 10px)))"
functional
import { buildTransform } from "css-transform-builder";
console.log(buildTransform(t => t.scale(1, 2)));
// => "scale(1,2)"
console.log(buildTransform(t => t.scale(1, 2).translate(10, 10)));
// => "scale(1,2) translate(10px,10px)"
console.log(buildTransform(t => t.rotate(20).translateY(10, "%")));
// => "rotate(20deg) translateY(10%)"
const customFunc: CustomUnit<"px"> = (n) => `${n * 2}px`;
console.log(buildTransform(t => t.translate(10, 10, customFunc)));
// => "translate(20px,20px)"
console.log(buildTransform(t => t.translateY("10%")));
// => "translateY(10%)"
console.log(buildTransform(t => t.translateX([["20px", "+", "10px"], "+", ["20px", "+", "10px"]])));
// => "translateX(calc((20px + 10px) + (20px + 10px)))"