js实现变形
使用 CSS 和 JavaScript 实现元素变形
在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性，通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。
基本变形操作
通过 style.transform 直接修改元素的变形属性：
const element = document.getElementById('target');
element.style.transform = 'rotate(45deg) scale(1.5)';使用 CSS 类切换变形状态
定义 CSS 类并通过 JavaScript 切换：
.transform-active {
transform: skew(20deg) translateX(50px);
transition: transform 0.3s ease;
}element.classList.add('transform-active');矩阵变形实现复杂效果
使用 matrix() 函数实现精确控制：
// matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
element.style.transform = 'matrix(1, 0.5, -0.5, 1, 100, 50)';3D 空间变形
添加透视和 3D 变换：
element.style.transform = 'perspective(500px) rotateY(180deg)';
element.style.transformStyle = 'preserve-3d';变形动画实现
结合 requestAnimationFrame 实现平滑动画：
let angle = 0;
function animate() {
angle += 2;
element.style.transform = `rotate(${angle % 360}deg)`;
requestAnimationFrame(animate);
}
animate();使用 Web Animations API
现代浏览器支持的更高效动画方案：
element.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(300px)' }
], {
duration: 1000,
iterations: Infinity
});变形与 SVG 元素
对 SVG 元素应用变形：
const svgElement = document.querySelector('svg rect');
svgElement.setAttribute('transform', 'rotate(30 50 50)');性能优化技巧
硬件加速优化：
element.style.willChange = 'transform';
element.style.backfaceVisibility = 'hidden';变形效果实现时需注意浏览器兼容性，现代方案建议优先使用 CSS Transforms Module Level 1 标准属性。复杂场景可考虑使用 GSAP 等专业动画库。
