Hi,(adsbygoogle = window.adsbygoogle || []).push({});

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.

**Physics Forums - The Fusion of Science and Community**

# 2D Perspective xform using CSS 3D matrix?

Have something to add?

- Similar discussions for: 2D Perspective xform using CSS 3D matrix?

Loading...

**Physics Forums - The Fusion of Science and Community**