Google Flutter中如何为rotateY旋转添加CSS式perspective透视效果？

嘿，作为从Web开发转Flutter的新手，这种CSS特性到Flutter的适配困惑我太懂了！你已经搞定了rotateY的旋转，现在就差透视效果对吧？

其实Flutter里没有和CSS perspective完全一一对应的属性，但有两种简单的方式可以实现类似的3D透视效果，我结合你的代码给你改改：

方法1：用Transform组件的perspective参数 #

这个方式类似CSS里给父元素加perspective属性，让子元素的3D变换产生透视感：

Widget _buildAnimation(BuildContext context, Widget child) {
  return Transform(
    // 数值越小，透视变形越强，你可以调整这个值匹配你要的效果
    // 类似CSS里 perspective: 1000px 的感觉，多试几个值就懂了
    perspective: 0.001,
    child: Container(
      padding: padding.value,
      child: Container(
        alignment: Alignment.center,
        transform: Matrix4.identity()..rotateY(-45.0),
        width: width.value,
        height: height.value,
        child: Image.asset('assets/images/kitten.jpg'),
        decoration: BoxDecoration(
          border: Border.all(width: 3.0),
          borderRadius: borderRadius.value,
        ),
      ),
    ),
  );
}

方法2：直接给Matrix4添加透视矩阵 #

如果你不想额外嵌套Transform，也可以直接在你已经用的Matrix4里设置透视，注意顺序：必须先设置透视，再做旋转，不然效果会不对：

Widget _buildAnimation(BuildContext context, Widget child) {
  return Container(
    padding: padding.value,
    child: Container(
      alignment: Alignment.center,
      // 先设置透视，再执行旋转Y轴
      transform: Matrix4.identity()
        ..setPerspective(0.001)
        ..rotateY(-45.0),
      width: width.value,
      height: height.value,
      child: Image.asset('assets/images/kitten.jpg'),
      decoration: BoxDecoration(
        border: Border.all(width: 3.0),
        borderRadius: borderRadius.value,
      ),
    ),
  );
}

小提示 #

• perspective的数值需要你自己微调：数值越小，透视的“近大远小”效果越明显；数值越大，效果越平缓。
• 这两种方式本质是一样的，都是给3D变换添加透视投影矩阵，选你觉得代码更整洁的方式就行。

内容的提问来源于stack exchange，提问作者asubanovsky