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属性，适合实现高性能动画。
