Rotating around custom pivot point - matrix

Question

I don't really know linear algebra, I'm trying to learn it because of this issue now.
I'm pretty sure it's kind of simple question for those who knows linear algebra.
I'll try to explain and show some pictures, videos and code to describe it better.
First, my goal is pretty simple at first glance.
Is to create this sort of animation
Now I managed to get almost there
Widget getWidget(Type type)
{
Matrix4 _pmat(num pv) {
return new Matrix4(
1.0, 0.0, 0.0, 0.0, //
0.0, 1.0, 0.0, 0.0, //
0.0, 0.0, 1.0, pv * 0.001, //
0.0, 0.0, 0.0, 1.0,
);
}
double delta = _panDown ? _delta : _animationOffset.value;
Matrix4 perspective = _pmat(0.35);
if (type == Type.NEXT)
{
delta -= MAX_DELTA;
}
double xOffset = ((delta / 70) / 2.5) * (deviceWidth / 2);
double zOffset = (delta / 70 / (math.pi - 0.55)).abs() * 180.0;
double rotateY = (math.pi - (delta / 3) * math.pi / 180) - math.pi;
if (type == Type.NEXT)
{
xOffset = ((delta / 70) / 2.5) * (deviceWidth);
zOffset *= 2;
}
perspective.translate(xOffset, 0.0, zOffset);
double angleOffset = delta * -0.5;
return new Transform(
alignment: FractionalOffset.center,
transform: perspective.scaled(1.0, 1.0, 1.0)
..rotateX(0.0)
..rotateY(rotateY)
..rotateZ(0.0),
child: new Container(color: Colors.red),
);
}
As you can see I'm currently moving each "page" with "magic numbers" and I call it magic numbers because I'm pretty dam noob at linear algebra and what I've done here is with the little understanding I have + trial and error. Clearly not the right way.
I have the delta which is basically just an offset taken from the user's GestureDetector to just play with it.
Now, with all the samples of this cube transition I saw let's say for example in CSS, they just rotated/translated each individual side. And then moved/rotated the "camera" or the parent I guess ?
I tried to do that method as well:
Like this:
Widget getWidget(Type type)
{
AlignmentGeometry alignmentGeometry;
Matrix4 matrix4;
switch (type)
{
case Type.PREVIOUS:
alignmentGeometry = FractionalOffset.center;
matrix4 = Matrix4.identity()
..setEntry(3, 2, 0.001) // perspective
..rotateY(-90.0 * math64.degrees2Radians)
..translate(deviceWidth / 2, 0.0, deviceWidth / 2);
break;
case Type.CURRENT:
alignmentGeometry = FractionalOffset.center;
matrix4 = Matrix4.identity()
..setEntry(3, 2, 0.001);
break;
case Type.NEXT:
alignmentGeometry = FractionalOffset.center;
matrix4 = Matrix4.identity()
..setEntry(3, 2, 0.001) // perspective
..rotateY(90.0 * math64.degrees2Radians)
..translate(-deviceWidth / 2, 0.0, deviceWidth / 2);
break;
}
return new Transform(
alignment: alignmentGeometry,
transform: matrix4,
child: new Container(
color: type == Type.NEXT ? Colors.green : type == Type.PREVIOUS ? Colors.red : Colors.black.withOpacity(0.5),
),
);
}
And then let's simply rotate the parent right ?
Widget build(BuildContext context)
{
List<Widget> widgets = [];
widgets.add(getWidget(Type.PREVIOUS));
widgets.add(getWidget(Type.CURRENT));
widgets.add(getWidget(Type.NEXT));
return new Scaffold(
key: _scaffoldKey,
body: new Container(
color: Colors.black,
child: new GestureDetector(
child: new Container(
color: Colors.white,
child: new Transform(
alignment: FractionalOffset.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.0001)
..rotateY(45.0 * math64.degrees2Radians),
child: new Stack(
children: widgets,
),
)
),
)
)
);
}
No:
Having it 90 degrees will make it all disappear.
Now, I do understand that I need sort of "pivot rotation point" or change the "origin" or "anchor point" not sure even how to call it.
So to picture it, let's say for example we also have a bottom side. so I want the center of that bottom side (let's say for example in a cube). So it will look like this:
Now if I'll rotate that "origin point" in the Y axis I should get the right animation right ?