Flutter web render test

main.dart

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(
        children: const [
          Home(),
        ],
      ),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var rotateX = 0.0;
  var value = 0.5;

  @override
  Widget build(BuildContext context) {
    var transform = Matrix4.identity()..setEntry(3, 2, 0.001);
    // print(transform);
    return Padding(
      padding: const EdgeInsets.all(32.0),
      child: Column(
        children: [
          Transform(
            transform: transform.clone()..rotateX(-value * 2),
            child: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              alignment: Alignment.center,
              child: RepaintBoundary(
                child: Transform(
                  transform: transform.clone()..rotateY(-value * 2),
                  child: Container(
                    color: Colors.black,
                    width: 60,
                    height: 60,
                  ),
                ),
              ),
            ),
          ),
          // Material(
          //   child: Container(
          //     child: Text("${transform}"),
          //   ),
          // ),

          // Material(
          //   child: Transform(
          //     transform: Matrix4.skewX(0.1)..rotateX(rotateX),
          //     child: ColoredBox(
          //       color: Colors.black,
          //       child: Transform(
          //         alignment: Alignment.topRight,
          //         transform: Matrix4.skewX(0.1)..rotateX(rotateX),
          //         child: Container(
          //           padding: const EdgeInsets.all(8.0),
          //           color: const Color(0xFFE8581C),
          //           child: const Text('测试！'),
          //         ),
          //       ),
          //     ),
          //   ),
          // ),
          Material(
            child: SizedBox(
              width: 100,
              height: 10,
              child: Slider(
                  value: value,
                  onChanged: (v) {
                    setState(() {
                      rotateX = 2 * pi * v;
                      value = v;
                    });
                  }),
            ),
          )
        ],
      ),
    );
  }
}