css-transform-matrix3d-webpack-plugin

一个将 CSS transform 属性转换为 3D 矩阵格式的 webpack 插件。

功能特性

- 📦 Webpack 集成：作为 webpack 插件无缝集成到构建流程中
- 🔄 智能转换：自动将各种 CSS transform 函数转换为 matrix3d 格式
- 🎯 全面支持：支持所有常见的 transform 函数
- ⚡ 高性能：构建时处理，不影响运行时性能
- 🛠 可配置：支持自定义文件匹配规则和详细日志

支持的 Transform 函数

$3

- translateX(), translateY(), translateZ()
- translate(), translate3d()

$3

- scaleX(), scaleY(), scaleZ()
- scale(), scale3d()

$3

- rotateX(), rotateY(), rotateZ(), rotate()
- rotate3d()

$3

- skewX(), skewY(), skew()

$3

- matrix() (2D 转 3D)
- matrix3d() (保持不变)

安装

``bash
npm install css-transform-matrix3d-webpack-plugin
`

使用方法

$3

`javascript
const CSSTransformTo3DMatrixPlugin = require("css-transform-matrix3d-webpack-plugin");

module.exports = {
plugins: [new CSSTransformTo3DMatrixPlugin()],
};
`

$3

`javascript
const CSSTransformTo3DMatrixPlugin = require("css-transform-matrix3d-webpack-plugin");

module.exports = {
plugins: [
new CSSTransformTo3DMatrixPlugin({
// 自定义文件匹配规则
test: /\.(css|scss|sass)$/,

// 启用详细日志
verbose: true,
}),
],
};
`

配置选项

| 选项 | 类型 | 默认值 | 描述 |
| --------- | ------- | ---------- | ---------------------- |
| test | RegExp | /\.css$/ | 匹配需要处理的文件 |
| verbose | Boolean | false | 是否输出详细的转换日志 |

转换示例

$3

`css
.element {
transform: translateX(100px) rotateY(45deg) scale(1.5);
}
`

$3

`css
.element {
transform: matrix3d(
1.06066,
0,
1.06066,
150,
0,
1.5,
0,
0,
-1.06066,
0,
1.06066,
0,
0,
0,
0,
1
);
}
``

工作原理

1. 解析阶段：插件解析 CSS 中的 transform 属性
2. 矩阵计算：将每个 transform 函数转换为对应的 4x4 变换矩阵
3. 矩阵合成：按顺序相乘所有变换矩阵得到最终矩阵
4. 格式化输出：将结果矩阵格式化为 matrix3d 函数

为什么使用 Matrix3D

- 性能优化：GPU 加速处理 3D 矩阵变换
- 兼容性：统一的矩阵格式避免浏览器差异
- 精确度：数学计算确保变换的精确性
- 复合变换：多个变换合并为单一矩阵操作

许可证

ISC

作者

wahfung