js实现变形

使用CSS变形（Transform）属性

在JavaScript中实现元素变形，最直接的方式是通过操作CSS的transform属性。transform支持多种变形效果，包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）。

// 获取DOM元素
const element = document.getElementById('target');

// 平移：向右移动50px，向下移动100px
element.style.transform = 'translate(50px, 100px)';

// 旋转：顺时针旋转45度
element.style.transform = 'rotate(45deg)';

// 缩放：宽度放大1.5倍，高度缩小0.5倍
element.style.transform = 'scale(1.5, 0.5)';

// 倾斜：水平倾斜30度
element.style.transform = 'skew(30deg, 0)';

组合变形效果

多个变形效果可以通过空格分隔组合使用。注意顺序会影响最终效果（从右向左应用）。

// 先旋转45度，再平移100px
element.style.transform = 'translateX(100px) rotate(45deg)';

使用矩阵变形

matrix()函数允许通过一个6值的矩阵实现复杂变形，格式为matrix(a, b, c, d, e, f)，对应以下变换矩阵：

[ \begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \ \end{pmatrix} ]

// 使用矩阵实现缩放和平移
element.style.transform = 'matrix(2, 0, 0, 2, 100, 50)'; // 放大2倍，平移(100,50)

3D变形

通过transform属性也可以实现3D变形效果，需配合perspective属性设置透视距离。

// 绕Y轴旋转60度
element.style.transform = 'rotateY(60deg)';

// 设置父级透视
document.getElementById('parent').style.perspective = '500px';

动画过渡

结合transition属性可以实现平滑的变形动画效果。

// 添加过渡效果
element.style.transition = 'transform 0.5s ease-in-out';

// 点击时触发旋转
element.addEventListener('click', () => {
  element.style.transform = 'rotate(180deg)';
});

使用Web Animations API

现代浏览器支持通过JavaScript直接创建动画，无需CSS。

element.animate(
  [
    { transform: 'rotate(0deg)' },
    { transform: 'rotate(360deg)' }
  ],
  {
    duration: 1000,
    iterations: Infinity
  }
);

变形原点控制

通过transform-origin属性可以调整变形的基准点（默认是元素中心）。

// 以左上角为原点旋转
element.style.transformOrigin = '0 0';
element.style.transform = 'rotate(30deg)';

性能优化建议

频繁操作transform属性时，建议使用requestAnimationFrame或CSS动画以获得更流畅的性能。硬件加速会优先处理transform和opacity属性，适合实现高性能动画。