CSS Transform to 3D Matrix Plugin

一个Webpack插件，可以将CSS的transform属性自动转换为matrix3d格式，以提升渲染性能并实现更好的GPU加速。

功能特性

• 🚀 性能优化: 将CSS transform属性转换为matrix3d格式，启用GPU加速
• 🔧 多种转换支持: 支持translate、rotate、scale、skew等所有常见的transform函数
• 📦 Webpack兼容: 同时支持Webpack 4和Webpack 5
• 🎯 文件类型支持: 支持.css、.scss、.less等多种样式文件
• 🐛 调试模式: 内置调试日志，方便开发时查看转换过程
• 💡 保留原始: 可选择保留原始transform代码作为注释

为什么使用Matrix3D？

使用matrix3d相比普通的transform属性有以下优势：

1. GPU加速: matrix3d会触发GPU硬件加速，提升动画性能
2. 避免重排重绘: 减少浏览器的layout和paint操作
3. 更好的动画流畅度: 特别是在复杂动画和移动设备上

安装

npm install css-transform-to-3d-matrix-plugin --save-dev

使用方法

基本用法

在你的webpack.config.js中添加插件：

const CSSTransformTo3DMatrixPlugin = require('css-transform-to-3d-matrix-plugin');

module.exports = {
  // ... 其他配置
  plugins: [
    new CSSTransformTo3DMatrixPlugin()
  ]
};

高级配置

const CSSTransformTo3DMatrixPlugin = require('css-transform-to-3d-matrix-plugin');

module.exports = {
  // ... 其他配置
  plugins: [
    new CSSTransformTo3DMatrixPlugin({
      // 是否启用调试模式，显示转换日志
      debug: true,
      
      // 要处理的文件扩展名
      extensions: ['.css', '.scss', '.less'],
      
      // 是否保留原始transform代码作为注释
      keepOriginal: false
    })
  ]
};

配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | debug | boolean | false | 启用调试日志 | | extensions | string[] | ['.css', '.scss', '.less'] | 要处理的文件扩展名 | | keepOriginal | boolean | false | 保留原始代码作为注释 |

转换示例

输入 CSS

.element1 { transform: translate(10px, 20px); }
.element2 { transform: rotate(45deg); }
.element3 { transform: scale(1.5); }
.element4 { transform: translate(10px, 20px) rotate(45deg) scale(1.5); }
.element5 { transform: matrix(1, 0, 0, 1, 10, 20); }

输出 CSS

.element1 { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 20, 0, 1); }
.element2 { transform: matrix3d(0.707107, 0.707107, 0, 0, -0.707107, 0.707107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
.element3 { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
.element4 { transform: matrix3d(1.06066, 1.06066, 0, 0, -1.06066, 1.06066, 0, 0, 0, 0, 1, 0, -10.606602, 31.819805, 0, 1); }
.element5 { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 20, 0, 1); }

支持的Transform函数

• translate(x, y) / translateX(x) / translateY(y) / translateZ(z) / translate3d(x, y, z)
• rotate(angle) / rotateX(angle) / rotateY(angle) / rotateZ(angle) / rotate3d(x, y, z, angle)
• scale(x, y) / scaleX(x) / scaleY(y) / scaleZ(z) / scale3d(x, y, z)
• skew(x, y) / skewX(x) / skewY(y)
• matrix(a, b, c, d, e, f) / matrix3d(...)

完整的项目集成示例

// webpack.config.js
const path = require('path');
const CSSTransformTo3DMatrixPlugin = require('css-transform-to-3d-matrix-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css'
    }),
    new CSSTransformTo3DMatrixPlugin({
      debug: process.env.NODE_ENV === 'development',
      extensions: ['.css', '.scss'],
      keepOriginal: false
    })
  ]
};

测试

运行测试以查看插件的转换效果：

npm test

这将运行测试脚本，展示各种transform属性的转换结果。

开发和构建脚本

# 运行测试
npm test

# 发布到私有仓库
npm run publish:private

# 发布新版本
npm run publish:patch    # 补丁版本
npm run publish:minor    # 次要版本  
npm run publish:major    # 主要版本

# 检查打包内容
npm run pack:check

浏览器兼容性

• Chrome: 12+
• Firefox: 10+
• Safari: 4+
• Edge: 12+
• IE: 10+

注意事项

1. 构建时转换: 这个插件在构建时进行转换，不会影响运行时性能
2. 精度处理: 转换后的数值会保留6位小数精度
3. 错误处理: 如果某个transform无法转换，会保持原样不会中断构建
4. 调试模式: 建议在开发环境启用debug模式，生产环境关闭

许可证

MIT © ke can

贡献

欢迎提交Issue和Pull Request！

更新日志

v1.0.0

• 初始版本发布
• 支持所有常见的transform函数
• 兼容Webpack 4和5
• 支持多种样式文件格式