js实现transform
在 JavaScript 中实现 CSS transform 属性
通过 JavaScript 操作 DOM 元素的 transform 属性，可以直接修改元素的样式或使用 CSSStyleDeclaration 接口。
直接修改元素的 style.transform 属性
const element = document.getElementById('myElement');
element.style.transform = 'translateX(100px) rotate(45deg)';使用 classList 添加或移除包含 transform 的 CSS 类
const element = document.getElementById('myElement');
element.classList.add('transform-effect');对应的 CSS 类：
.transform-effect {
transform: scale(1.5) translateY(20px);
}动态计算并应用 transform
可以通过 JavaScript 动态计算变换值，例如基于用户输入或动画帧：
let angle = 0;
function animate() {
angle += 1;
element.style.transform = `rotate(${angle}deg)`;
requestAnimationFrame(animate);
}
animate();使用 matrix 或 matrix3d 实现复杂变换
对于更复杂的变换，可以直接使用矩阵：
element.style.transform = 'matrix(1, 0.2, 0, 1, 10, 20)';通过 getComputedStyle 获取当前 transform 值
如果需要读取当前的变换状态：
const computedStyle = window.getComputedStyle(element);
const currentTransform = computedStyle.transform;
console.log(currentTransform); // 例如: "matrix(1, 0, 0, 1, 0, 0)"注意事项
- 多次设置
transform会覆盖之前的属性，因此需要合并现有值或使用库（如 GSAP）管理复杂动画。 - 某些变换属性（如
rotate3d）可能需要硬件加速优化性能。
