CSS3D rotation incorrect on Firefox

[deathcap]

The GL and CSS scenes match on Chrome (40.0.2214.111) but on Firefox (35.0 beta) they do not:

isolated test case:

<div style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
overflow: hidden;
perspective: 1100px; -webkit-perspective: 1100px;
width: 1024px; height: 910px;"><div style="background-color: red;
position: absolute;
width: 100%;
height: 100%;
transform: 
 translateZ(1100px)
 matrix3d(0.002, 0, 0, 0,
           0, 0.001, 0.002, 0,
           0, 0, -0.5, 0,
           0, 0, -5, 1);
-webkit-transform: 
 translateZ(1100px)
 matrix3d(0.002, 0, 0, 0,
           0, 0.001, 0.002, 0,
           0, 0, -0.5, 0,
           0, 0, -5, 1);

           "></div></div>

on Chrome, Firefox (tested both 35.0 beta and 38.0a1 2015-02-15 nightly), and Safari respectively:

[deathcap]

http://atirip.com/2015/03/17/sorry-sad-state-of-matrix-transforms-in-browsers/ (from https://news.ycombinator.com/item?id=9217278) - this may or may not be or related to:

Image rotate and scale does not work in Firefox

Using rotate() and scale() considered harmful. If you scale and rotate your images then Firefox will scale the end result completely wrong. The bounding box is correct, but the image itself gets distorted.

http://devteam.ixara.com/public/bugs/mozrot.html https://bugzilla.mozilla.org/show_bug.cgi?id=1128467