makeTransform()

Part of the @remotion/animation-utils package.

Applies a sequence of transformation functions to generate a combined CSS transform property.

API

Takes an array of strings (generated from the below transformation functions) and combines them into a single string.

Usage

tsx
import { makeTransform, rotate, translate } from"@remotion/animation-utils";
consttransform=makeTransform([rotate(45), translate(50, 50)]);
// => "rotate(45deg) translate(50px, 50px)"
constmarkup= <divstyle={{ transform }} />;

tsx
import { rotate } from"@remotion/animation-utils";
consttransform=rotate(45);
// => "rotate(45deg)"
constmarkup= <divstyle={{ transform }} />;

Transformation Functions

matrix()

tsx
import { matrix } from"@remotion/animation-utils";
consttransform=matrix(1, 0, 0, 1, 50, 50);
// => "matrix(1, 0, 0, 1, 50, 50)"

matrix3d()

tsx
import { matrix3d } from"@remotion/animation-utils";
consttransform=matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 50, 0, 1);
// => "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 50, 0, 1)"

perspective()

tsx
import { perspective } from"@remotion/animation-utils";
consttransform=perspective(100);
// => "perspective(100px)"

rotate()

tsx
import { rotate } from"@remotion/animation-utils";
consttransform=rotate(45);
// => "rotate(45deg)"

rotate3d()

tsx
import { rotate3d } from"@remotion/animation-utils";
consttransform=rotate3d(1, 0, 0, 45);
// => "rotate3d(1, 0, 0, 45deg)"
consttransform2=rotate3d(1, 0, 0, "45deg");
// => "rotate3d(1, 0, 0, 45deg)"
consttransform3=rotate3d(1, 0, 0, 45, "deg");
// => "rotate3d(1, 0, 0, 45deg)"

rotateX()

tsx
import { rotateX } from"@remotion/animation-utils";
consttransform=rotateX(45);
// => "rotateX(45deg)"
consttransform2=rotateX("45deg");
// => "rotateX(45deg)"
consttransform3=rotateX(1, "rad");
// => "rotateX(45rad)"

rotateY()

tsx
import { rotateY } from"@remotion/animation-utils";
consttransform=rotateY(45);
// => "rotateY(45deg)"
consttransform2=rotateY("45deg");
// => "rotateY(45deg)"
consttransform3=rotateY(1, "rad");
// => "rotateY(1rad)"

rotateZ()

tsx
import { rotateZ } from"@remotion/animation-utils";
consttransform=rotateZ(45);
// => "rotateZ(45deg)"
consttransform2=rotateZ("45deg");
// => "rotateZ(45deg)"
consttransform3=rotateZ(1, "rad");
// => "rotateZ(1rad)"

scale()

tsx
import { scale } from"@remotion/animation-utils";
consttransform=scale(2);
// => "scale(2, 2)"
consttransform2=scale(2, 3);
// => "scale(2, 3)"

scale3d()

tsx
import { scale3d } from"@remotion/animation-utils";
consttransform=scale3d(2, 3, 4);
// => "scale3d(2, 3, 4)"

scaleX()

tsx
import { scaleX } from"@remotion/animation-utils";
consttransform=scaleX(2);
// => "scaleX(2)"

scaleY()

tsx
import { scaleY } from"@remotion/animation-utils";
consttransform=scaleY(2);
// => "scaleY(2)"

scaleZ()

tsx
import { scaleZ } from"@remotion/animation-utils";
consttransform=scaleZ(2);
// => "scaleZ(2)"

skew()

tsx
import { skew } from"@remotion/animation-utils";
consttransform=skew(45);
// => "skew(45deg)"

skewX()

tsx
import { skewX } from"@remotion/animation-utils";
consttransform=skewX(45);
// => "skewX(45deg)"
consttransform2=skewX("45deg");
// => "skewX(45deg)"
consttransform3=skewX(1, "rad");
// => "skewX(1rad)"

skewY()

tsx
import { skewY } from"@remotion/animation-utils";
consttransform=skewY(45);
// => "skewY(45deg)"
consttransform2=skewY("45deg");
// => "skewY(45deg)"
consttransform3=skewY(1, "rad");
// => "skewY(1rad)"

translate()

tsx
import { translate } from"@remotion/animation-utils";
consttransform=translate(10);
// => "translate(10px)"
consttransform2=translate("12rem");
// => "translate(12rem)"
consttransform3=translate(10, 20);
// => "translate(10px, 20px)"
consttransform4=translate(10, "%");
// => "translate(10%)"
consttransform5=translate(0, "%", 10, "%");
// => "translate(0%, 10%)"
consttransform6=translate("10px", "30%");
// => "translate(10px, 20%)"

translate3d()

tsx
import { translate3d } from"@remotion/animation-utils";
consttransform=translate3d(10, 20, 30);
// => "translate3d(10px, 20px, 30px)"
consttransform2=translate3d("10px", "20%", "30rem");
// => "translate3d(10px, 20%, 30rem)"
consttransform3=translate3d(10, "%", 20, "px", 30, "px");
// => "translate3d(10%, 20px, 30px)"

translateX()

tsx
import { translateX } from"@remotion/animation-utils";
consttransform=translateX(10);
// => "translateX(10px)"
consttransform2=translateX("12rem");
// => "translateX(12rem)"
consttransform3=translateX(10, "%");
// => "translateX(10%)"

translateY()

tsx
import { translateY } from"@remotion/animation-utils";
consttransform=translateY(10);
// => "translateY(10px)"
consttransform2=translateY("12rem");
// => "translateY(12rem)"
consttransform3=translateY(10, "px");
// => "translateY(10px)"

translateZ()

tsx
import { translateZ } from"@remotion/animation-utils";
consttransform=translateZ(10);
// => "translateZ(10px)"
consttransform2=translateZ("12rem");
// => "translateZ(12rem)"
consttransform3=translateZ(10, "px");
// => "translateZ(10px)"

API​

Usage​

Transformation Functions​

matrix()​

matrix3d()​

perspective()​

rotate()​

rotate3d()​

rotateX()​

rotateY()​

rotateZ()​

scale()​

scale3d()​

scaleX()​

scaleY()​

scaleZ()​

skew()​

skewX()​

skewY()​

translate()​

translate3d()​

translateX()​

translateY()​

translateZ()​

See also​

API