I found a ton of formulae and what not, but 3D isn't my forte so I'm at a loss of what specifically to use. My goal is to convert the data in an 3D .obj file (vertices, normals, faces) to CSS3D (width, height, rotateX,Y,Z and/or similar transforms).

For example 2 simple planes

g plane1
# simple along along Z axis
v  0.0  0.0  0.0
v  0.0  0.0  1.0
v  0.0  1.0  1.0
v  0.0  1.0  0.0

g plane2
# plane rotated 90 degrees along Y-axis
v  0.0  0.0  0.0
v  0.0  1.0  0.0
v  1.0  1.0  0.0
v  1.0  0.0  0.0

f  1 2 3 4
f  5 6 7 8

Could this data be converted to:

#plane1 {
    width: X;
    height: Y;
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx)
}

#plane2 {
    width: X;
    height: Y;
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx)
}

/* Or something equivalent such as transform: matrix3d() */

In summary, while this may be too HTML/CSS-y for game development, the core question is how to get the X/Y/Z-rotation of a 4 point plane from it's matrix of x,y,z coordinates?

I want to convert the data in a 3D .obj file (vertices, normals, faces) to CSS3D (width, height, rotateX,Y,Z and/or similar transforms). I found a bunch of formulae and what-not, but 3D isn't my forte, so I don't know which I should use.

Essentially: How can I get the X/Y/Z-rotation of a 4-point plane from it's matrix of x,y,z coordinates?

For example, here are 2 simple planes in .obj format:

g plane1
# simple along along Z axis
v  0.0  0.0  0.0
v  0.0  0.0  1.0
v  0.0  1.0  1.0
v  0.0  1.0  0.0

g plane2
# plane rotated 90 degrees along Y-axis
v  0.0  0.0  0.0
v  0.0  1.0  0.0
v  1.0  1.0  0.0
v  1.0  0.0  0.0

f  1 2 3 4
f  5 6 7 8

I'd like to convert it into CSS:

#plane1 {
    width: X;
    height: Y;
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx)
}

#plane2 {
    width: X;
    height: Y;
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx)
}

/* Or equivalent, like using transform: matrix3d() */