js实现transform

transform 属性的基本实现

在 JavaScript 中实现 CSS 的 transform 属性，可以通过直接操作 DOM 元素的 style 属性来完成。例如，对一个元素进行平移、旋转或缩放：

const element = document.getElementById('target');
element.style.transform = 'translateX(100px) rotate(45deg) scale(1.5)';

动态修改 transform 值

通过 JavaScript 可以动态计算并更新 transform 属性。以下示例展示如何根据用户输入或事件动态调整变换效果：

let rotation = 0;
function rotateElement() {
  rotation += 15;
  element.style.transform = `rotate(${rotation}deg)`;
}

矩阵变换的高级控制

对于更复杂的变换，可以使用 matrix() 或 matrix3d() 形式。以下代码演示如何生成 2D 变换矩阵：

const a = 1, b = 0.5, c = 0, d = 1, tx = 10, ty = 20;
element.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`;

复合变换的注意事项

当同时应用多个变换时，需注意变换顺序会影响最终效果。以下代码展示不同顺序导致的差异：

// 先平移后旋转
element.style.transform = 'translateX(100px) rotate(30deg)';

// 先旋转后平移（效果不同）
element.style.transform = 'rotate(30deg) translateX(100px)';

性能优化建议

频繁修改 transform 属性时，应使用 requestAnimationFrame 进行优化：

function animate() {
  // 更新transform逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

获取当前变换值

通过 getComputedStyle 可以读取元素当前的 transform 值：

const currentTransform = window.getComputedStyle(element).transform;
console.log(currentTransform); // 返回矩阵字符串

3D 变换的特殊处理

实现 3D 变换时需要设置透视和 transform-style：

parentElement.style.perspective = '500px';
element.style.transformStyle = 'preserve-3d';
element.style.transform = 'rotateY(45deg) translateZ(100px)';