js实现transform

实现 CSS transform 效果的 JavaScript 方法

在 JavaScript 中实现 CSS 的 transform 属性可以通过直接操作元素的 style 属性或使用 classList 切换预定义的 CSS 类。

直接修改 style.transform

通过 JavaScript 动态设置元素的 transform 属性：

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

可以链式组合多个变换函数：

• translate(x, y) 或 translateX/Y/Z
• rotate(angle) 或 rotate3d
• scale(x, y) 或 scale3d
• skew(x-angle, y-angle)
• matrix() 或 matrix3d()

使用 classList 切换 CSS 类

定义 CSS 类：

.transform-active {
  transform: translate(50px, 20px) rotate(30deg);
  transition: transform 0.3s ease;
}

JavaScript 切换类：

document.getElementById('target').classList.add('transform-active');

获取当前变换值

读取元素的当前变换矩阵：

const style = window.getComputedStyle(element);
const matrix = style.getPropertyValue('transform');
console.log(matrix); // 返回 matrix() 或 matrix3d() 字符串

动画实现

结合 requestAnimationFrame 实现平滑动画：

let position = 0;
function animate() {
  position += 2;
  element.style.transform = `translateX(${position}px)`;

  if (position < 200) {
    requestAnimationFrame(animate);
  }
}
animate();

3D 变换注意事项

启用 3D 变换需要设置透视和变换样式：

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

性能优化建议

硬件加速技巧：

element.style.willChange = 'transform'; // 提前告知浏览器准备 GPU 加速
element.style.backfaceVisibility = 'hidden'; // 优化 3D 渲染