@studiometa/js-toolkit/utils/css/transform.js

A set of useful little bits of JavaScript to boost your project! 🚀

import { isDefined } from "../is.js";
import { eachElements } from "./utils.js";
const TRANSFORM_PROPS = [
  "x",
  "y",
  "z",
  "rotate",
  "rotateX",
  "rotateY",
  "rotateZ",
  "scale",
  "scaleX",
  "scaleY",
  "scaleZ",
  "skew",
  "skewX",
  "skewY"
];
function transform(elementOrElements, props) {
  if (!elementOrElements) return;
  let value = "";
  if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {
    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;
  }
  if (isDefined(props.rotate)) {
    value += `rotate(${props.rotate}deg) `;
  } else {
    if (isDefined(props.rotateX)) {
      value += `rotateX(${props.rotateX}deg) `;
    }
    if (isDefined(props.rotateY)) {
      value += `rotateY(${props.rotateY}deg) `;
    }
    if (isDefined(props.rotateZ)) {
      value += `rotateZ(${props.rotateZ}deg) `;
    }
  }
  if (isDefined(props.scale)) {
    value += `scale(${props.scale}) `;
  } else {
    if (isDefined(props.scaleX)) {
      value += `scaleX(${props.scaleX}) `;
    }
    if (isDefined(props.scaleY)) {
      value += `scaleY(${props.scaleY}) `;
    }
    if (isDefined(props.scaleZ)) {
      value += `scaleZ(${props.scaleZ}) `;
    }
  }
  if (isDefined(props.skew)) {
    value += `skew(${props.skew}deg) `;
  } else {
    if (isDefined(props.skewX)) {
      value += `skewX(${props.skewX}deg) `;
    }
    if (isDefined(props.skewY)) {
      value += `skewY(${props.skewY}deg) `;
    }
  }
  eachElements(elementOrElements, (element) => {
    element.style.transform = value;
  });
  return value;
}
export {
  TRANSFORM_PROPS,
  transform
};
//# sourceMappingURL=transform.js.map