css-transform-matrix3d-webpack-plugin

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

功能特性

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

支持的 Transform 函数

平移 (Translation)

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

缩放 (Scaling)

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

旋转 (Rotation)

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

倾斜 (Skewing)

• skewX(), skewY(), skew()

矩阵 (Matrix)

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

安装

npm install css-transform-matrix3d-webpack-plugin

使用方法

基础配置

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

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

高级配置

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 | 是否输出详细的转换日志 |

转换示例

输入

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

输出

.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