在前端开发中，经常需要对 DOM 元素进行样式操作。其中，CSS 转换是一种非常实用的技术，它可以让我们在不改变原有 HTML 结构的情况下，对元素进行旋转、缩放、移动等变换。本文将详细介绍 CSS 转换回调的使用方法和注意事项。
什么是 CSS 转换
CSS 转换（CSS transform）是 CSS3 中提供的一个属性，可以通过设置该属性实现对元素的变形。CSS 转换包括四种类型：
- 位移（translate）
- 旋转（rotate）
- 缩放（scale）
- 倾斜（skew）
除此之外，还可以通过组合多个转换来实现更加复杂的效果。
如何使用 CSS 转换
使用 CSS 转换非常简单，只需要在样式表中为目标元素设置 transform 属性即可。例如，要使一个元素向右平移 50px，可以这样写：
.target {
transform: translateX(50px);
}如果要将元素同时进行多个转换，可以将多个转换用空格隔开。例如，要将元素向右平移 50px，并将其放大 1.5 倍，可以这样写：
.target {
transform: translateX(50px) scale(1.5);
}CSS 转换虽然非常好用，但是有一个问题：一旦设置了转换属性，就无法获取到元素的真实位置、大小等信息。这对于某些场景下需要精确控制元素位置和大小的应用来说，会带来不便。
为了解决这个问题，CSS3 新增了两个 API： getBoundingClientRect 和 getComputedStyle。这两个 API 可以获取到元素的真实位置、大小等信息，可以在进行 CSS 转换后将元素还原到初始状态。
使用 getBoundingClientRect
getBoundingClientRect 方法返回一个 DOMRect 对象，该对象包含了元素的位置、大小等信息。其中，left、top 分别表示元素左上角相对于文档左上角的距离，width、height 则分别表示元素的宽度和高度。
例如，我们可以这样获取一个元素的位置：
const rect = element.getBoundingClientRect(); console.log(rect.left, rect.top);
如果要对元素进行平移等变换操作，可以先获取元素的位置信息，再进行变换操作，最后再将元素恢复到初始位置。例如，要将一个元素向右平移 50px，可以这样写：
const rect = element.getBoundingClientRect();
element.style.transform = 'translateX(50px)';
const newRect = element.getBoundingClientRect();
const dx = rect.left - newRect.left;
element.style.transform = `translateX(${dx}px)`;使用 getComputedStyle
getComputedStyle 方法返回一个 CSSStyleDeclaration 对象，该对象包含了元素的所有样式信息。通过这个方法可以获取到元素的实际大小等信息。
例如，我们可以这样获取一个元素的宽度：
const style = window.getComputedStyle(element); console.log(style.width);
如果要对元素进行缩放等变换操作，可以先获取元素的大小信息，再进行变换操作，最后再将元素恢复到初始大小。例如，要将一个元素放大 1.5 倍，可以这样写：
-- -------------------- ---- ------- ----- ----- - --------------------------------- ----- ----- - ------------------------ ----- ------ - ------------------------- ----------------------- - ------------- ----- -------- - --------------------------------- ----- -------- - --------------------------- ----- --------- - ---------------------------- ----- -- - --------- - ------ - -- ----- -- - ---------- - ------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------