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. 更好的动画流畅度: 特别是在复杂动画和移动设备上

安装

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

使用方法

$3

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

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

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

$3

`javascript
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 | 保留原始代码作为注释 |

转换示例

$3

`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); }
`

$3

`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(...)

完整的项目集成示例

`javascript
// 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
})
]
};
`

测试

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

`bash
npm test
`

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

开发和构建脚本

`bash


运行测试

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！

更新日志

$3

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