A webpack plugin that converts CSS transform properties to matrix3d format for better performance
npm install 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相比普通的transform属性有以下优势:
1. GPU加速: matrix3d会触发GPU硬件加速,提升动画性能
2. 避免重排重绘: 减少浏览器的layout和paint操作
3. 更好的动画流畅度: 特别是在复杂动画和移动设备上
``bash`
npm install css-transform-to-3d-matrix-plugin --save-dev
在你的webpack.config.js中添加插件:
`javascript
const CSSTransformTo3DMatrixPlugin = require('css-transform-to-3d-matrix-plugin');
module.exports = {
// ... 其他配置
plugins: [
new CSSTransformTo3DMatrixPlugin()
]
};
`
`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 | 保留原始代码作为注释 |
`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); }
- 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
- Chrome: 12+
- Firefox: 10+
- Safari: 4+
- Edge: 12+
- IE: 10+
1. 构建时转换: 这个插件在构建时进行转换,不会影响运行时性能
2. 精度处理: 转换后的数值会保留6位小数精度
3. 错误处理: 如果某个transform无法转换,会保持原样不会中断构建
4. 调试模式: 建议在开发环境启用debug模式,生产环境关闭
MIT © ke can
欢迎提交Issue和Pull Request!