前端实现3d效果_Flutter实现3D效果，一个字，炫！

老孟的博客地址：

http://laomengit.com/

Flutter 中3D效果是通过Transform组件实现的，没有变换效果的实现：

 class TransformDemo extends StatelessWidget {
    @overrideWidget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('3D 变换Demo'),
      ),
      body: Container(
        alignment: Alignment.center,
        color: Colors.white,
        child: Text('3D 变换Demo'),
      ),
    );
  }
}

通过 GestureDetector 组件添加滑动事件监听：

@overrideWidget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
      title: Text('3D 变换Demo'),
    ),
    body: GestureDetector(
      onPanUpdate: (details) {
    
        print('$details');
      },
      child: Container(
        alignment: Alignment.center,
        color: Colors.white,
        child: Text('3D 变换Demo'),
      ),
    ),
  );
}

添加 Transform对组件进入旋转：

@overrideWidget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)
        ..rotateX(pi/6)
        ..rotateY(pi/6),
      alignment: Alignment.center,
      child: S