The original code doesn’t get things right since the front camera is just not in 90 degree. In most of our test devices with front camera, the direction of preview of front camera is 270. So we just wrongly rotated the front camera with 90deg and then flip it along the rotated x-axis (which in fact flip the preview upside-down) then it happened to be right.

It’s hard to describe why this transform get things right (Mainly because the coordinate is also rotated/flipped as well). Take 270 degree as an example, it looks like:
When we flip it first then rotate it, the preview first get mirrored. The direction of preview is 270, so after rotating the preview looks like mirrored with 90 degree in direction; then we rotate it back by -270 degree, where it gets rotated 270 degree *clockwise* (because of mirroring, the rotation is now acting in opposite direction) so 90+270=360 and we get it back to correct direction.

If we don’t want bothering with this kind of transform confusion, we can
* nest the viewfinder element and put flip statement on its parent. 
* for 90 and 270 degree, use rotate(90) scaleY(-1); and for 0 and 180 degree, use rotate(90) scaleX(-1).

Anyway I don’t have better idea to make this much more straightforward. I did these mainly based on test. :(