Webpack CSS Transform to Matrix Plugin

一个强大的Webpack插件，能够将CSS中的transform属性自动转换为3D矩阵格式（matrix3d），提升浏览器渲染性能并确保跨浏览器兼容性。

🚀 特性

• 自动转换: 将所有CSS transform函数转换为matrix3d格式
• 完整支持: 支持所有标准的2D和3D transform函数
• 性能优化: matrix3d格式能够触发硬件加速，提升动画性能
• 保持精度: 使用高精度数学计算，保证变换的准确性
• 配置灵活: 丰富的配置选项，满足不同需求
• TypeScript支持: 完整的TypeScript类型定义

📦 安装

npm install webpack-css-transform-to-matrix-plugin --save-dev
# 或者
pnpm add webpack-css-transform-to-matrix-plugin -D

🛠️ 使用方法

基础配置

const CssTransformToMatrixPlugin = require('webpack-css-transform-to-matrix-plugin');

module.exports = {
  // ... 其他webpack配置
  plugins: [
    new CssTransformToMatrixPlugin({
      enabled: true,
      keepOriginal: false,
      only3d: false
    })
  ]
};

TypeScript配置

import CssTransformToMatrixPlugin from 'webpack-css-transform-to-matrix-plugin';

const config = {
  plugins: [
    new CssTransformToMatrixPlugin({
      enabled: true,
      keepOriginal: true,
      include: [/\.css$/i, /\.scss$/i]
    })
  ]
};

⚙️ 配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | enabled | boolean | true | 是否启用插件 | | keepOriginal | boolean | false | 是否保留原transform属性作为注释 | | only3d | boolean | false | 是否只处理包含3D函数的transform | | exclude | RegExp[] | [] | 排除的文件模式 | | include | RegExp[] | [/\.css$/i, /\.scss$/i, /\.sass$/i, /\.less$/i] | 包含的文件模式 |

📝 转换示例

输入CSS

.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

.rotate-only {
  transform: rotate(90deg);
}

.complex-3d {
  transform: translateZ(10px) rotateX(30deg) rotateY(45deg);
}

输出CSS

.element {
  transform: matrix3d(0.848528, 0.848528, 0, 0, -1.018234, 1.018234, 0, 0, 0, 0, 1.2, 0, 50, 100, 0, 1);
}

.rotate-only {
  transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

.complex-3d {
  transform: matrix3d(0.707107, 0.5, 0.5, 0, -0.707107, 0.5, 0.5, 0, 0, -0.707107, 0.707107, 0, 0, 0, 10, 1);
}

🎯 支持的Transform函数

2D变换

• translate(x, y)
• translateX(x), translateY(y)
• scale(x, y), scaleX(x), scaleY(y)
• rotate(angle)
• skew(x, y), skewX(x), skewY(y)
• matrix(a, b, c, d, e, f)

3D变换

• translate3d(x, y, z), translateZ(z)
• scale3d(x, y, z), scaleZ(z)
• rotate3d(x, y, z, angle)
• rotateX(angle), rotateY(angle), rotateZ(angle)
• matrix3d(...)

🔧 开发

构建项目

npm run build

运行测试

npm test

开发模式

npm run dev

📚 API参考

CssTransformToMatrixPlugin

主插件类，实现Webpack插件接口。

class CssTransformToMatrixPlugin {
  constructor(options?: PluginOptions)
  apply(compiler: Compiler): void
}

transformToMatrix3d

核心转换函数，将transform字符串转换为matrix3d。

function transformToMatrix3d(transform: string): string

parseTransform

解析transform字符串，提取所有transform函数。

function parseTransform(transform: string): TransformFunction[]

🤝 贡献

欢迎提交Issue和Pull Request！

1. Fork本仓库
2. 创建feature分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 打开Pull Request

📄 许可证

MIT License - 查看 LICENSE 文件了解详情。

🙏 致谢

• 感谢所有贡献者
• 参考了CSS Transform规范和WebKit实现
• 使用了现代JavaScript数学库进行精确计算

📞 支持

如果你在使用过程中遇到问题：

1. 查看文档
2. 搜索已有Issue
3. 创建新Issue

🌟 如果这个项目对你有帮助，请给个Star支持一下！