如何在Flutter中实现类3D X轴旋转效果？

你当前用的Matrix4.identity() ..rotateX(degrees * 3.1415927 / 180)是基础的3D旋转，但默认的透视参数比较弱，所以看起来和图示的效果有差距。要实现那种带明显近大远小的类3D旋转，只需要给矩阵添加合适的透视投影即可，甚至可以自定义3D转2D的映射来精确控制效果。

方案1：调整Matrix4的透视参数（最简单） #

Flutter的Matrix4支持直接设置透视，你只需要在旋转前添加透视配置，就能让旋转后的元素呈现出更真实的类3D效果。比如：

import 'dart:math' as math;

Transform(
  transform: Matrix4.identity()
    ..setPerspective(0.001) // 这个值越小，透视效果越强，可根据需求调整
    ..rotateX(45 * math.pi / 180), // 示例旋转45度
  alignment: Alignment.center, // 旋转中心设为控件中心
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: const Center(child: Text("类3D旋转效果")),
  ),
)

或者你也可以手动修改矩阵的透视元素（Matrix4的第16个元素，索引为15），原理和setPerspective一致：

Transform(
  transform: Matrix4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0.001, // 透视系数，控制近大远小的强度
    0, 0, 0, 1,
  )..rotateX(45 * math.pi / 180),
  alignment: Alignment.center,
  child: YourWidget(),
)

调整0.001这个值就能匹配你想要的透视强度——值越小，旋转时控件远端的缩小效果越明显，越接近你图示的效果。

方案2：自定义3D转2D映射（更精确） #

如果需要像OpenCV那样精确控制透视变换，你可以通过计算控件四个顶点在3D旋转后的2D坐标，然后用CustomPainter来绘制。

比如，先计算单个点的3D转2D投影：

// 定义3D点结构
class Point3D {
  final double x;
  final double y;
  final double z;
  Point3D(this.x, this.y, this.z);
}

Point3D projectPoint(Point3D point, double angleX) {
  // 绕X轴旋转矩阵
  final rotateX = Matrix4.identity()..rotateX(angleX);
  // 应用旋转变换
  final rotated = rotateX.transform3(Vector3(point.x, point.y, point.z));
  // 透视投影公式（f为焦距，可调整）
  final f = 1000.0;
  final x = rotated.x * f / (f - rotated.z);
  final y = rotated.y * f / (f - rotated.z);
  return Point3D(x, y, rotated.z);
}

然后用这些转换后的坐标绘制控件的轮廓和内容，这种方式能完全自定义透视效果，和你参考的OpenCV思路一致。

总结 #

不管是用原生Matrix4调整透视参数，还是自定义3D转2D映射，都能实现你想要的类3D X轴旋转效果。优先试试方案1，调整透视系数就能快速看到效果，非常方便！

内容的提问来源于stack exchange，提问作者AbdulMomen 毓亘丿丕賱賲丐賲賳