A webpack plugin that converts CSS transform properties to 3D matrix format
npm install css-transform-matrix3d-webpack-plugin一个将 CSS transform 属性转换为 3D 矩阵格式的 webpack 插件。
- 📦 Webpack 集成:作为 webpack 插件无缝集成到构建流程中
- 🔄 智能转换:自动将各种 CSS transform 函数转换为 matrix3d 格式
- 🎯 全面支持:支持所有常见的 transform 函数
- ⚡ 高性能:构建时处理,不影响运行时性能
- 🛠 可配置:支持自定义文件匹配规则和详细日志
- translateX(), translateY(), translateZ()
- translate(), translate3d()
- scaleX(), scaleY(), scaleZ()
- scale(), scale3d()
- rotateX(), rotateY(), rotateZ(), rotate()
- rotate3d()
- skewX(), skewY(), skew()
- matrix() (2D 转 3D)
- matrix3d() (保持不变)
``bash`
npm install css-transform-matrix3d-webpack-plugin
`javascript
const CSSTransformTo3DMatrixPlugin = require("css-transform-matrix3d-webpack-plugin");
module.exports = {
plugins: [new CSSTransformTo3DMatrixPlugin()],
};
`
`javascript
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 | 是否输出详细的转换日志 |
`css`
.element {
transform: translateX(100px) rotateY(45deg) scale(1.5);
}
`css``
.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 函数
- 性能优化:GPU 加速处理 3D 矩阵变换
- 兼容性:统一的矩阵格式避免浏览器差异
- 精确度:数学计算确保变换的精确性
- 复合变换:多个变换合并为单一矩阵操作
ISC
wahfung