Transform to Matrix CLI

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

安装

``bash
npm install -g transform-to-matrix-cli
`

或在项目中本地安装：

`bash
npm install transform-to-matrix-cli
`

使用方式

$3

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

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

$3

启动交互式转换模式：

`bash
tm-cli interactive


或简写


tm-cli i
`

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

`bash
tm-cli
`

$3

查看使用示例：

`bash
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 等）
- ✅ 美观的命令行界面
- ✅ 详细的矩阵展示

使用示例

$3

`bash


平移

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

旋转

tm-cli convert "rotate(45deg)"

缩放

tm-cli convert "scale(1.5, 2)"

倾斜

tm-cli convert "skewX(20deg)"
`

$3

`bash


3D旋转

tm-cli convert "rotateX(30deg) rotateY(45deg)"

3D平移

tm-cli convert "translateZ(100px)"

组合3D变换

tm-cli convert "rotateX(30deg) rotateY(45deg) translateZ(100px)"
`

$3

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

编程式使用

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

`javascript
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

作者

281345774@qq.com