Transform to Matrix CLI

一个将 CSS transform 转换为 matrix3d 矩阵的命令行工具。

安装

npm install -g transform-to-matrix-cli

或在项目中本地安装：

npm install transform-to-matrix-cli

使用方式

1. 命令行转换

直接转换指定的 transform 字符串：

tm-cli convert "translate(100px, 50px)"

2. 交互式模式

启动交互式转换模式：

tm-cli interactive
# 或简写
tm-cli i

不带任何参数运行也会进入交互式模式：

tm-cli

3. 查看示例

查看使用示例：

tm-cli examples
# 或简写
tm-cli ex

功能特性

• ✅ 支持所有 CSS transform 函数

  • translate, translateX, translateY, translateZ, translate3d
  • scale, scaleX, scaleY, scaleZ, scale3d
  • rotate, rotateX, rotateY, rotateZ, rotate3d
  • skew, skewX, skewY
  • perspective
  • matrix, matrix3d

• ✅ 支持组合变换

• ✅ 支持多种单位（px, deg, rad, turn, grad 等）

• ✅ 美观的命令行界面

• ✅ 详细的矩阵展示

使用示例

基础变换

# 平移
tm-cli convert "translate(100px, 50px)"

# 旋转
tm-cli convert "rotate(45deg)"

# 缩放
tm-cli convert "scale(1.5, 2)"

# 倾斜
tm-cli convert "skewX(20deg)"

3D 变换

# 3D旋转
tm-cli convert "rotateX(30deg) rotateY(45deg)"

# 3D平移
tm-cli convert "translateZ(100px)"

# 组合3D变换
tm-cli convert "rotateX(30deg) rotateY(45deg) translateZ(100px)"

组合变换

tm-cli convert "translate(100px, 50px) rotate(45deg) scale(1.2)"

编程式使用

你也可以在代码中使用这个包：

const {
	transformToMatrix,
	transformToMatrixArray,
} = require('transform-to-matrix-cli');

// 获取 matrix3d CSS 字符串
const css = transformToMatrix('translate(100px, 50px) rotate(45deg)');
console.log(css);
// 输出: matrix3d(0.707107, 0.707107, 0, 0, -0.707107, 0.707107, 0, 0, 0, 0, 1, 0, 53.033009, 159.099026, 0, 1)

// 获取矩阵数组
const matrix = transformToMatrixArray('rotate(45deg)');
console.log(matrix);
// 输出: [0.707107, 0.707107, 0, 0, -0.707107, 0.707107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

输出格式

转换结果包含：

1. 输入: 原始的 transform 字符串
2. 输出: matrix3d CSS 字符串
3. 矩阵详情: 格式化的 4x4 矩阵展示

示例输出：

输入:
  translate(100px, 50px)

输出:
  matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 50, 0, 1)

矩阵详情:

  4x4 矩阵:
  [    1.000000,     0.000000,     0.000000,     0.000000]
  [    0.000000,     1.000000,     0.000000,     0.000000]
  [    0.000000,     0.000000,     1.000000,     0.000000]
  [  100.000000,    50.000000,     0.000000,     1.000000]

技术细节

• 所有变换都转换为 4x4 矩阵（matrix3d）
• 支持矩阵乘法组合多个变换
• 角度单位自动转换为弧度进行计算
• 保留 6 位小数精度

相关项目

• transform-to-matrix-loader - Webpack loader
• transform-to-matrix-plugin - PostCSS plugin

许可证

ISC

作者

[email protected]