CSS Transform 是 CSS3 引入的属性，用于对元素进行旋转、缩放、倾斜和平移等视觉变换，而不会影响页面布局。变换在浏览器的合成层（compositor layer）上执行，性能极高，是实现流畅动画的首选方案。
2D 变换包括 translate()、rotate()、scale() 和 skew()，在平面内操作。3D 变换在此基础上增加了 Z 轴操作：translateZ()、rotateX()、rotateY() 和 perspective()。3D 变换需要配合 perspective 属性才能产生透视效果，否则只是正交投影。
transform 属性中的多个函数从右向左依次执行。例如 transform: translate(100px,0) rotate(45deg) 会先旋转再平移。顺序不同结果差异巨大——这在调试变换效果时是常见的陷阱。建议在本工具中逐个添加变换，观察叠加效果。
本CSS Transform生成器提供了完整的可视化编辑界面，以下是详细的使用指南：
基础操作：页面顶部是实时预览区域，虚线框代表元素的原始位置，实色方块是变换后的效果。中间控制区域分为平移、旋转、缩放、倾斜四个模块，每个参数都提供滑块和数字输入框两种调整方式，滑块适合粗调，数字框适合精确输入。拖动滑块时预览区域会实时更新，让你直观看到每个参数的效果。
3D变换：勾选「启用3D变换」后，会显示 rotateX、rotateY 和 translateZ 三个3D专属参数。配合「透视效果」选项，可以产生近大远小的3D视觉效果。perspective 值控制透视强度——值越小效果越夸张（类似广角镜头），值越大越接近正交投影。典型值在 600-1200px 之间。
变换原点：transform-origin 决定了变换的中心点，默认在元素中心（50% 50%）。你可以通过滑块或下拉预设快速切换到四个角点或边中点。同一个 rotate(45deg)，以中心旋转和以左下角旋转效果完全不同，这在制作铰链动画、扇形展开效果时至关重要。
代码导出：调整满意后，下方的代码区域会自动生成完整的CSS代码片段。点击「复制CSS代码」按钮即可复制到剪贴板，直接粘贴到你的样式表中使用。代码包含了 transform-origin 设置，确保在你的项目中效果一致。
CSS Transform 在现代Web开发中无处不在，以下是几个典型应用：
交互动画与微交互：按钮hover时的轻微放大、卡片悬停时的3D翻转、图标点击时的旋转反馈——这些微交互几乎都基于transform。相比修改width/height/top/left，transform不会触发布局重排，由GPU直接合成，动画帧率可达60fps。搭配transition属性，几行CSS就能实现丝滑的过渡效果。
响应式图片与媒体：在响应式布局中，经常需要对图片进行缩放和裁剪。利用 transform: scale() 配合 overflow:hidden，可以在不改变图片原始尺寸的情况下实现视觉缩放。这在轮播图、卡片缩略图、全屏背景等场景中广泛使用，特别是需要保持图片比例的场景。
3D卡片与翻转动效：利用 rotateY 和 perspective 可以创建3D翻转卡片效果——正面显示内容，hover时翻转到背面。这在产品展示、团队成员介绍、记忆游戏等场景中非常流行。配合 backface-visibility:hidden 属性，可以隐藏背面，实现真正的双面卡片效果。
Transform 与性能优化：在Web动画性能优化中，transform 和 opacity 被称为「两个不会触发重排的属性」。修改这两个属性时，浏览器只在合成层（compositor layer）上操作，不需要重新计算布局和绘制。因此，实现动画时应优先使用 transform: translate3d() 代替 top/left，用 transform: scale() 代替 width/height，可以显著提升动画流畅度。
will-change 与硬件加速：当元素需要频繁变换时，可以提前声明 will-change: transform，让浏览器为该元素创建独立的合成层，进一步提升性能。但不要滥用——过多will-change声明会导致内存占用激增。仅在即将发生动画的元素上使用，动画结束后移除。
矩阵表示 matrix()：所有transform函数最终都会被浏览器转换为4×4变换矩阵。高级开发者可以直接使用 matrix(a,b,c,d,e,f)（2D）或 matrix3d(...)（3D）来精确控制变换。虽然可读性较差，但在需要动画插值、计算变换组合时，矩阵表示更精确。本工具生成的函数式写法更易维护，推荐日常使用。
不会。CSS Transform 不会改变元素的文档流位置，只是在渲染层面对元素进行视觉变换。元素的原始占位空间保持不变，周围元素不会因变换而移动。这也是为什么 transform 常用于动画——它不会触发重排（reflow），性能开销极小。
在2D上下文中，rotate(deg) 和 rotateZ(deg) 效果完全相同，都是绕Z轴旋转。区别在于 rotateZ 明确指定了旋转轴，通常在3D变换中使用。如果你只做平面旋转，使用 rotate 即可。
transform-origin 定义了变换的中心点，默认值是元素中心（50% 50%）。你可以改为左上角（0 0）、右下角（100% 100%）等任意位置。变换中心点不同，同样的旋转或缩放会产生完全不同的视觉效果。
transform 的多个函数从右向左执行。例如 translate(50px,0) rotate(45deg) 会先旋转45度再平移。顺序很重要：先平移再旋转和先旋转再平移结果完全不同。
需要在父元素上设置 perspective 属性。例如 perspective: 800px 会让3D变换产生近大远小的透视效果。值越小透视越强，值越大越接近平行投影。
scale 接受负值，效果是镜像翻转。scaleX(-1) 水平翻转，scaleY(-1) 垂直翻转，scale(-1,-1) 等效180度旋转。在实现图标翻转时非常实用。
可以。本工具生成的CSS代码完全符合W3C标准，可直接复制到项目样式表中使用。对于需要动画的场景，可将生成的transform值直接用于 @keyframes 或 transition 中。