Flutter中Transform组件的使用秘籍

导读：Transform 是 Flutter 中一个强大的布局/渲染组件，允许你对其子 Widget 进行位移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等各种二维或三维变换操作。本文将从最基础的 API 用法讲起，结合代码示例、ASCII 图解与原理解析，帮助你掌握 Transform 的常见用法与进阶技巧，让你能轻松实现各种炫酷变换效果。

什么是 Transform？核心概念回顾
常用构造函数与参数详解
- 2.1 Transform.translate
- 2.2 Transform.rotate
- 2.3 Transform.scale
- 2.4 Transform.skew
- 2.5 通用 Transform + Matrix4
坐标系与原点（origin）与对齐（alignment）
- 3.1 默认原点与对齐方式
- 3.2 修改 origin 实现“绕任意点旋转”
- 3.3 alignment 对齐对变换的影响
代码示例与图解
- 4.1 位移示例：平移一个方块
- 4.2 旋转示例：绕中心 vs 绕自定义原点
- 4.3 缩放示例：从中心/某端开始放大
- 4.4 倾斜示例：X 轴与 Y 轴倾斜
- 4.5 综合示例：组合变换（先旋转再缩放）
进阶：使用 Matrix4 实现三维变换
- 5.1 什么是 Matrix4？基础概念
- 5.2 绕 X/Y/Z 轴旋转
- 5.3 视距（perspective）效果
- 5.4 实战示例：3D 翻转卡片
性能与注意事项
- 6.1 对齐方式与布局步奏
- 6.2 避免无意义的多层嵌套
- 6.3 对动画和手势的影响
总结

一、什么是 Transform？核心概念回顾

在 Flutter 中，布局流程大致分为“父传约束 → 子测量 → 父定位”三步。普通 Widgets（如 Container、SizedBox）会在第一步就决定 要占据的大小，然后由父组件将它放置于某个坐标；
Transform 不同于常规的“盒模型”组件，它不会改变子 Widget 在布局阶段的大小与位置（也就是说，Transform 子树的尺寸在布局时保持不变），而是在绘制阶段对 Canvas 进行一次或多次矩阵变换，实现视觉上的“位移/旋转/缩放/倾斜”。
换句话说，Transform：
1. 不影响子 Widget 的布局尺寸计算（其占位区域不变）；
2. 仅在 绘制（paint） 时对 Canvas 进行仿射或三维变换。

因此，使用 Transform 可以做到“不改变力布局而改变最终视觉效果”，可用来做各种过渡特效、动画效果、3D 交互等。

二、常用构造函数与参数详解

Flutter 内置了若干“快捷”构造方法，让我们无需手动构造 Matrix4 也能快速使用常见的二维变换：

2.1 `Transform.translate`

Transform.translate({
  Key? key,
  required Offset offset,
  Widget? child,
  // 可选：
  Clip clipBehavior = Clip.none,
})

作用：将子 Widget 在绘制时沿 X、Y 方向平移指定偏移量。
参数：
- offset：一个 Offset(dx, dy)，dx > 0 向右，dx < 0 向左；dy > 0 向下，dy < 0 向上。
- clipBehavior：如果子 Widget 超出父 Canvas 区域，是否要进行裁切。

示例：Transform.translate(offset: Offset(20, 50), child: MyBox());

表示在绘制 MyBox() 时先对 Canvas 做一次平移 (20,50)，然后再绘制 MyBox，最后还原 Canvas。

2.2 `Transform.rotate`

Transform.rotate({
  Key? key,
  required double angle,        // 弧度
  Offset? origin,               // 旋转原点（相对于子 Widget 左上角）
  Alignment alignment = Alignment.center,
  Widget? child,
  Clip clipBehavior = Clip.none,
})

作用：将子 Widget 在绘制时绕着某个点旋转，旋转角度为 angle（以弧度为单位）。
参数：
- angle：默认以顺时针方向为正，单位是弧度（常用 math.pi / 4 等）；
- origin：可选，用于指定相对于子 Widget 左上角的原点 (x,y)，只有当同时未指定 alignment 时会生效；
- alignment：可选，用于指定“旋转原点”对应子 Widget 的对齐方式（默认 Alignment.center，即绕子 Widget 的中心旋转）。

注意：origin 与 alignment 不能同时生效。
如果你希望“绕子控件左上角(0,0)旋转”，可以设置 alignment: Alignment.topLeft，也可以设置 origin: Offset(0,0)；
如果你希望“绕子控件左下角旋转”，则：
alignment: Alignment.bottomLeft，或
origin: Offset(0, childHeight)。

2.3 `Transform.scale`

Transform.scale({
  Key? key,
  required double scale,        // 缩放倍数，1.0 表示原始大小
  Offset? origin,
  Alignment alignment = Alignment.center,
  Widget? child,
  Clip clipBehavior = Clip.none,
})

作用：将子 Widget 在绘制时做等比缩放，水平和垂直方向同时按 scale 值进行缩放。
参数：
- scale：缩放倍率，scale > 1 放大，0 < scale < 1 缩小，负数则会翻转并缩放。
- origin 与 alignment：与 rotate 中相同，用于指定缩放中心。

2.4 `Transform.skew`

Transform.skew({
  Key? key,
  required double skewX,         // X 轴倾斜角度：正值 → 右下倾斜
  required double skewY,         // Y 轴倾斜角度：正值 → 右下倾斜
  Alignment alignment = Alignment.center,
  Widget? child,
  Clip clipBehavior = Clip.none,
})

作用：在绘制时对 Canvas 做一次**倾斜（shear）**变换：
- skewX：沿 X 轴对 Y 坐标进行倾斜，即在 Y 轴上下移动时，让 X 坐标线性变化。
- skewY：沿 Y 轴对 X 坐标进行倾斜，即在 X 轴左右移动时，让 Y 坐标线性变化。
直观来说，倾斜效果会让矩形看起来像“平行四边形”。
同样支持 alignment 来指定基于哪个对齐点进行倾斜（通常使用 Alignment.center 居中倾斜）。

2.5 通用 `Transform` + `Matrix4`

如果需要做“组合变换”（先平移、再旋转、再缩放等多步叠加），或做三维变换，就要直接使用最底层的：

Transform({
  Key? key,
  required Matrix4 transform,
  Alignment alignment = Alignment.center,
  Offset? origin,
  Widget? child,
  Clip clipBehavior = Clip.none,
})

Matrix4：一个 4×4 的矩阵，用于描述OpenGL风格的仿射 & 透视 & 三维变换。通过 Matrix4.translationValues(dx,dy,dz)、Matrix4.rotationZ(angle)、Matrix4.diagonal3Values(sx,sy,sz) 等静态方法或实例方法 (..translate() ..rotateZ() ..scale()) 可以灵活组合。
常见三维 API：
- matrix.setEntry(3, 2, 0.001)：设置透视投影的“视距”参数，让 Z 方向的物体看起来有透视感。
- Matrix4.rotationX(theta)、Matrix4.rotationY(theta)、Matrix4.rotationZ(theta)：分别绕三个轴旋转。

三、坐标系与原点（origin）与对齐（alignment）

正确理解“原点（origin）”与“对齐（alignment）”对 Transform 行为至关重要。

3.1 默认原点与对齐方式

默认 alignment = Alignment.center：表示在绘制时，先将子 Widget 的坐标系原点移到其“中心点”，再进行变换，最后将变换后的坐标系复位。
- 换句话说：Align 相当于对 Canvas 做两次平移：
  1. translate(centerX, centerY)
  2. apply transform…
  3. translate(-centerX, -centerY)
如果不指定 origin，且默认 alignment，那么变换的“锚点”就是子 Widget 的中心 (width/2, height/2)。

3.2 修改 `origin` 实现“绕任意点旋转”

origin：Offset(dx, dy)，表示相对于子 Widget 左上角的变换起点。
- 如果 origin: Offset(0,0)，则绕子 Widget 左上角旋转或缩放；
- 如果想绕“子 Widget 右下角”旋转：必须指定origin: Offset(childWidth, childHeight)；

注意：
只在不指定 alignment 时，origin 才会生效；
如果同时指定 alignment，则 origin 会被忽略。

3.3 `alignment` 对齐对变换的影响

alignment 类型为 Alignment，其数值范围在 [-1, +1]。Alignment(x, y) 中：
- x = -1 → 位于子 Widget 左边缘；x = 0 → 位于子 Widget 水平中心；x = +1 → 位于子 Widget 右边缘；
- y = -1 → 位于子 Widget 顶部；y = 0 → 位于子 Widget 垂直中心；y = +1 → 位于子 Widget 底部。

// 举例：绕“右上角”旋转
Transform.rotate(
  angle: math.pi / 4,
  alignment: Alignment.topRight, // 锚点在子 Widget 的右上角
  child: MyBox(),
);

效果：MyBox() 在绘制时：
1. 将 Canvas 平移到“子 Widget 右上角”坐标；
2. 以这个点为中心旋转 π/4；
3. 再将 Canvas 平移回来。

四、代码示例与图解

下面通过一系列有代表性的示例，结合ASCII 图解，帮助你更直观地理解 Transform 的行为。

4.1 位移示例：平移一个方块

import 'package:flutter/material.dart';

class TransformTranslateDemo extends StatelessWidget {
  const TransformTranslateDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            // 原始位置：蓝色方块
            Positioned(
              left: 50,
              top: 50,
              child: Container(width: 80, height: 80, color: Colors.blue),
            ),
            // 使用 Transform.translate 将红色方块视觉向右下移动
            Positioned(
              left: 50,
              top: 150,
              child: Transform.translate(
                offset: const Offset(40, 40),
                child: Container(width: 80, height: 80, color: Colors.red),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ASCII 图解

Y
│
│   (50,50)
│    ┌─────────┐   ← 蓝色方块 (80×80)
│    │  蓝色   │
│    └─────────┘
│
│   (50,150)         * 将 Canvas 平移(40,40)，再绘制红色方块 *
│    ┌─────────┐       实际显示坐标 = (50+40, 150+40) = (90,190)
│    │  红色   │   ← 红色方块视觉位置
│    └─────────┘
└────────────────────────────→ X

解释：红色方块在布局阶段仍占据 (50,150) ~ (130,230) 区域，但绘制时 Canvas 被先平移 (40,40)，导致视觉上的方块位于 (90,190)~(170,270)。

4.2 旋转示例：绕中心 vs 绕自定义原点

import 'package:flutter/material.dart';
import 'dart:math' as math;

class TransformRotateDemo extends StatelessWidget {
  const TransformRotateDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 绕中心旋转 45°
            Transform.rotate(
              angle: math.pi / 4, // 45° = π/4
              child: Container(width: 100, height: 60, color: Colors.green),
            ),
            const SizedBox(height: 40),
            // 绕左上角旋转 45°
            Transform.rotate(
              angle: math.pi / 4,
              alignment: Alignment.topLeft,
              child: Container(width: 100, height: 60, color: Colors.orange),
            ),
            const SizedBox(height: 40),
            // 绕自定义原点 (20, 30) 旋转 45°
            Transform.rotate(
              angle: math.pi / 4,
              origin: const Offset(20, 30),
              // origin 相对于左上角
              alignment: Alignment.topLeft, // origin 生效
              child: Container(width: 100, height: 60, color: Colors.purple),
            ),
          ],
        ),
      ),
    );
  }
}

ASCII 图解

1. 绕中心旋转 (绿色)
   Container 原始中心： (50,30)（相对于自己）
   - Canvas 平移到 (50,30)，旋转 45°，再平移回
   视觉结果：整个矩形绕自身中心倾斜

2. 绕左上角旋转 (橙色)
   Alignment.topLeft → 原点 = (0,0)
   - Canvas 平移到子 Widget 左上 (0,0), 旋转 45°, 回平移

3. 绕自定义原点 (20,30) 旋转 (紫色)
   origin = (20,30) 相对于子左上
   - Canvas 平移到 (20,30)，旋转 45°, 再平移回
   视觉：绕这一偏移点旋转

解释：
1. 默认 alignment = Alignment.center，因此绕 (width/2, height/2) = (50, 30) 旋转；
2. 设置 alignment: Alignment.topLeft，则绕 (0,0) 旋转；
3. 设置 origin: Offset(20,30)，alignment 同时置为 Alignment.topLeft，这样才会绕自定义原点旋转。

4.3 缩放示例：从中心/某端开始放大

import 'package:flutter/material.dart';

class TransformScaleDemo extends StatelessWidget {
  const TransformScaleDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 默认从中心缩放
            Transform.scale(
              scale: 1.5, // 放大 1.5 倍
              child: Container(width: 80, height: 80, color: Colors.cyan),
            ),
            const SizedBox(height: 40),
            // 从左上角缩放
            Transform.scale(
              scale: 1.5,
              alignment: Alignment.topLeft,
              child: Container(width: 80, height: 80, color: Colors.redAccent),
            ),
          ],
        ),
      ),
    );
  }
}

ASCII 图解

1. 中心缩放 (青色方块)
   原始中心： (40,40)
   - Canvas 平移到 (40,40)，scale 1.5，再平移回

2. 左上角缩放 (红色方块)
   alignment: topLeft → 原点 (0,0)
   - Canvas 平移到 (0,0) -> scale 1.5 -> 平移回

视觉差别：
- 青色方块以自身中心放大；
- 红色方块以左上角放大，会朝右下方向扩展。

4.4 倾斜示例：X 轴与 Y 轴倾斜

import 'package:flutter/material.dart';

class TransformSkewDemo extends StatelessWidget {
  const TransformSkewDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 沿 X 轴倾斜（skewX = 0.3）
            Transform.skew(
              skewX: 0.3,
              skewY: 0.0,
              child: Container(width: 120, height: 60, color: Colors.indigo),
            ),
            const SizedBox(height: 40),
            // 同时沿 X、Y 轴倾斜
            Transform.skew(
              skewX: 0.2,
              skewY: 0.5,
              child: Container(width: 120, height: 60, color: Colors.teal),
            ),
          ],
        ),
      ),
    );
  }
}

ASCII 图解

1. X 轴倾斜 (靛青方块)
   原始矩形: ┌───┐
             │   │
             └───┘
   纵坐标 y 上升时，x 向右按 0.3 * y 移动
   视觉: 右上和右下角都被“向右拉伸”，变为平行四边形

2. X、Y 轴倾斜 (青绿色方块)
   x 轴：y 越大，x 偏移越多（skewX=0.2）
   y 轴：x 越大，y 偏移越多（skewY=0.5）
   结果：更加“斜”的形状

说明：
- skewX 会让上方顶边相对于底边向右偏移；
- skewY 会让右边顶边相对于左边向下偏移。

4.5 综合示例：组合变换（先旋转再缩放）

使用底层 Matrix4，演示“先旋转 30°，再以中心放大 1.3 倍”：

import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:flutter/painting.dart';

class TransformMatrixDemo extends StatelessWidget {
  const TransformMatrixDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.identity()
            ..rotateZ(math.pi / 6)      // 旋转 30°
            ..scale(1.3, 1.3),          // 缩放 1.3 倍
          child: Container(
            width: 100,
            height: 60,
            color: Colors.amber,
            child: const Center(child: Text('组合变换')),
          ),
        ),
      ),
    );
  }
}

ASCII 图解

原始矩形 (100×60)
┌────────────────┐
│                │
│   组合变换     │
│                │
└────────────────┘

步骤 1: 绕中心旋转 30°
    /\
   /  \
  /    \
 ───────          （变为一个斜向矩形）
  \    \
   \  /
    \/

步骤 2: 再整体放大 1.3 倍
   视觉上该斜矩形会“均匀扩大”至原大小的 1.3 倍

解释：
- Matrix4.identity()：初始化为单位矩阵；
- ..rotateZ(math.pi/6)：在 Z 轴（屏幕垂直方向）旋转 30°；
- ..scale(1.3, 1.3)：再沿 X、Y 等比缩放 1.3 倍；
- 整体效果先旋转再缩放。

五、进阶：使用 `Matrix4` 实现三维变换

二维的 translate、rotateZ、scale 已足以满足大多数需求。如果想做“3D 翻转”之类的效果，就必须使用 Matrix4 中的三维旋转与透视投影参数。

5.1 什么是 Matrix4？基础概念

Matrix4 实际是一个 4×4 的矩阵，常用来在 3D 空间中对点 (x,y,z,1) 进行线性仿射变换与透视映射。

一般形如：

[ m00 m01 m02 m03 ]
[ m10 m11 m12 m13 ]
[ m20 m21 m22 m23 ]
[ m30 m31 m32 m33 ]

常用方法：
- Matrix4.identity()：单位矩阵；
- .translate(x,y,z) / .rotateX(theta) / .rotateY(theta) / .rotateZ(theta) / .scale(sx,sy,sz)；
- .setEntry(row, col, value)：直接设置某个元素，通常用于设置透视参数 setEntry(3, 2, perspectiveValue)。

5.2 绕 X/Y/Z 轴旋转

Matrix4.identity()
  ..setEntry(3, 2, 0.001) // 透视投影参数：值越小，透视感越强
  ..rotateX(math.pi / 4) // 绕 X 轴 45°
  ..rotateY(math.pi / 6); // 再绕 Y 轴 30°

setEntry(3, 2, v)：将矩阵 [3][2] 位置设置为 v，用于添加透视缩放。
rotateX / rotateY / rotateZ：分别在三维空间中绕对应轴旋转。

5.3 视距（perspective）效果

若不加透视（保持 m32 = 0），则只是“正交投影”，即看上去像“旋转的平面”，缺少远近深度感；
设置 m32 = 0.001（通常在 0.001 ~ 0.003 范围）后，Z 值的增加会让 Widget 有近大远小的视觉效果，模拟真实 3D 透视。

5.4 实战示例：3D 翻转卡片

下面演示一个经典的“卡片沿 Y 轴翻转”效果：当 angle 从 0 变化到 π，卡片会先“正面消失”，再逐渐“反面出现”。

import 'package:flutter/material.dart';
import 'dart:math' as math;

class FlipCardDemo extends StatefulWidget {
  const FlipCardDemo({Key? key}) : super(key: key);

  @override
  State<FlipCardDemo> createState() => _FlipCardDemoState();
}

class _FlipCardDemoState extends State<FlipCardDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween(begin: 0.0, end: math.pi).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget _buildCard(BuildContext context, double angle) {
    final isFront = angle <= math.pi / 2;
    final displayWidget = isFront
        ? Container(
            width: 200,
            height: 120,
            color: Colors.blue,
            child: const Center(child: Text('正面', style: TextStyle(color: Colors.white, fontSize: 24))),
          )
        : Transform(
            alignment: Alignment.center,
            transform: Matrix4.identity()..rotateY(math.pi),
            child: Container(
              width: 200,
              height: 120,
              color: Colors.red,
              child: const Center(child: Text('反面', style: TextStyle(color: Colors.white, fontSize: 24))),
            ),
          );
    return Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)  // 透视
        ..rotateY(angle),        // 绕 Y 轴翻转
      child: displayWidget,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('3D 翻转卡片示例')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return _buildCard(context, _animation.value);
          },
        ),
      ),
    );
  }
}

ASCII 图解

初始状态：angle = 0
 ┌────────────────────────┐
 │       蓝色卡片正面      │
 └────────────────────────┘

angle = π/4 (45°)
  _______
 /       \
|  正面   |   （有轻微透视，边缘向内收缩）
 \_______/

angle = π/2 (90°)
  ───────   （卡片正面“消失”于屏幕宽度极小处）

angle = 3π/4 (135°)
  _______
 /       \
|  反面   |   (已翻至背面，显示红色)
 \_______/

angle = π (180°)
 ┌────────────────────────┐
 │       红色卡片背面      │
 └────────────────────────┘

逻辑：
1. 当 angle <= π/2 时，显示正面；
2. 当 angle > π/2 时，为了让背面正面朝我们，需要另做一次 ..rotateY(math.pi)，将其翻转正向显示。

六、性能与注意事项

6.1 对齐方式与布局步骤

由于 Transform 不影响布局尺寸，所以父组件依然会为子 Widget 分配“原始”宽高；如果你对“可点击区域”或“布局碰撞”有要求，需要注意子 Widget 的实际占位并未变化。
如果想让整个控件的点击区域也跟随视觉变换，可考虑把 Transform 放在更外层，或使用 GestureDetector 包裹外层坐标进行检测。

6.2 避免无意义的多层嵌套

不要在每一帧动画中都创建一个新的 Matrix4.identity()，会造成大量临时对象分配。可考虑将 Matrix4 保存为成员变量，在每帧只做 ..setEntry() ..rotate() ..scale() 的链式调用。
如果只是单纯的“居中旋转”而无需三维透视，可以直接用 Transform.rotate 而非手写 Matrix4。

6.3 对动画和手势的影响

当使用 Transform 做点击或拖拽交互时，需要注意“命中测试（hit testing）”默认是基于未变换前的子 Widget 区域进行。如果你的视觉效果移出了原始区域，点击可能会“穿透”到下层。
- 解决办法：在需要交互的 Transform 组件外再包裹一个 GestureDetector 或透明 Container，使其占据视觉外扩后的范围。
如果在动画过程中需要连续观察 angle、scale 等变化，建议使用 AnimatedBuilder 而非 setState + Transform，以减少无谓的 build() 调用。

七、总结

本文从以下几方面 深度剖析 了 Flutter 中的 Transform 组件：

Transform 原理：布局阶段不改变大小/位置，只在绘制阶段对 Canvas 做变换；
常用快捷 API：详解 Transform.translate、Transform.rotate、Transform.scale、Transform.skew；
原点（origin）与对齐（alignment）：控制变换中心的两种方式及其区别；
代码示例与 ASCII 图解：通过平移、旋转、缩放、倾斜、组合变换等示例，让复杂操作更直观；
Matrix4 三维变换：介绍绕 X/Y/Z 轴旋转与透视投影，示范 3D 翻转卡片效果；
性能与交互注意事项：提醒你避免无谓内存分配，关注点击区域与动画更新方式。

掌握 Transform 后，你就可以轻松地为 Flutter 应用添加各种过渡动画、3D 交互、动效微调等炫酷特效。

Flutter中Transform组件的使用秘籍

目录

一、什么是 Transform？核心概念回顾

二、常用构造函数与参数详解

2.1 `Transform.translate`

2.2 `Transform.rotate`

2.3 `Transform.scale`

2.4 `Transform.skew`

2.5 通用 `Transform` + `Matrix4`

三、坐标系与原点（origin）与对齐（alignment）

3.1 默认原点与对齐方式

3.2 修改 `origin` 实现“绕任意点旋转”

3.3 `alignment` 对齐对变换的影响

四、代码示例与图解

4.1 位移示例：平移一个方块

ASCII 图解

4.2 旋转示例：绕中心 vs 绕自定义原点

ASCII 图解

4.3 缩放示例：从中心/某端开始放大

ASCII 图解

4.4 倾斜示例：X 轴与 Y 轴倾斜

ASCII 图解

4.5 综合示例：组合变换（先旋转再缩放）

ASCII 图解

五、进阶：使用 `Matrix4` 实现三维变换

5.1 什么是 Matrix4？基础概念

5.2 绕 X/Y/Z 轴旋转

5.3 视距（perspective）效果

5.4 实战示例：3D 翻转卡片

ASCII 图解

六、性能与注意事项

6.1 对齐方式与布局步骤

6.2 避免无意义的多层嵌套

6.3 对动画和手势的影响

七、总结

评论已关闭

推荐阅读

目录

一、什么是 Transform？核心概念回顾

二、常用构造函数与参数详解

2.1 Transform.translate

2.2 Transform.rotate

2.3 Transform.scale

2.4 Transform.skew

2.5 通用 Transform + Matrix4

三、坐标系与原点（origin）与对齐（alignment）

3.1 默认原点与对齐方式

3.2 修改 origin 实现“绕任意点旋转”

3.3 alignment 对齐对变换的影响

四、代码示例与图解

4.1 位移示例：平移一个方块

ASCII 图解

4.2 旋转示例：绕中心 vs 绕自定义原点

ASCII 图解

4.3 缩放示例：从中心/某端开始放大

ASCII 图解

4.4 倾斜示例：X 轴与 Y 轴倾斜

ASCII 图解

4.5 综合示例：组合变换（先旋转再缩放）

ASCII 图解

五、进阶：使用 Matrix4 实现三维变换

5.1 什么是 Matrix4？基础概念

5.2 绕 X/Y/Z 轴旋转

5.3 视距（perspective）效果

5.4 实战示例：3D 翻转卡片

ASCII 图解

六、性能与注意事项

6.1 对齐方式与布局步骤

6.2 避免无意义的多层嵌套

6.3 对动画和手势的影响

七、总结

评论已关闭

推荐阅读

2.1 `Transform.translate`

2.2 `Transform.rotate`

2.3 `Transform.scale`

2.4 `Transform.skew`

2.5 通用 `Transform` + `Matrix4`

3.2 修改 `origin` 实现“绕任意点旋转”

3.3 `alignment` 对齐对变换的影响

五、进阶：使用 `Matrix4` 实现三维变换