# 2D Perspective xform using CSS 3D matrix?

by SporkInTucson
Tags: affine, css, perspective, transform
 P: 5 Hi, I have used Mathematica to determine a 3x3 perspective transformation from one 2D image to another. Let's say that Mathematica gave me the following 3x3 matrix: a b c d e f g h 1 Now, moving outside of Mathematica, I'm trying to use that perspective xform it gave me in CSS on a webpage. There are two general matrix xform choices in CSS3: 2D "matrix" and 3D "matrix3d". The former, "matrix", is 3x3 but doesn't allow specification of the third row -- it's fixed to "0 0 1": p q r s t u 0 0 1 If I'm not mistaken, this is the form of an affine xform, but I'm trying to do a perspective transform which isn't affine. So, I thought I could use the more general "matrix3D", which allows all 16 elements to be specified: k l m n o p q r s t u v w x y z I am hoping that I can provide values that would accomplish the original transformation but leave z ordinates unaffected. Off the top of my head, as a wild guess, I thought it might be: a b 0 c d e 0 f 0 0 1 0 g h 0 1 where a,b,c,d,e,f,g,h are the values from the original 3x3 xform Mathematica gave me. I'm neither a physicist nor a mathematician, but thought this might be a good place to ask. Even though I'm ultimately trying to do a perspective xform on a web page using CSS, it seems like a generic sort of linear algebra question... Any help or pointers will be greatly appreciated.
 P: 5 Seems like the CSS details have prevented me from posting my question clearly. I've figured it all out, as of this morning, but wanted to post a follow up to close out the thread. CSS constrains the type of 3x3 xform matrices that can be applied in 2D. Specifically, it allows 3x3 xform matrices with only six specifiable elements (a,b,c,d,e,f): a b c d e f 0 0 1 On the other hand, CSS does not constrain the type of 4x4 transformations that can be applied in 3D. It allows all sixteen elements to be specified in: a b c d e f g h i j k l m n o p My question was about how to use the more flexible 3D transformation to accomplish 2D transformations on a 2D plane in 3D. Since all the z ordinates in my problem are 0, one can assume that the plane is z=0, but I don't think that matters. The answer to my question was that a 2D 3x3 xform can be expressed as a 3D 4x4 transform. a b c d e f g h i becomes a b 0 c d e 0 f 0 0 1 0 g h 0 i So, I've managed to get my web browser to perform a perspective transformation on the "before" image using CSS's 3D transformation facility.