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 | Science Articles, Homework Help, Discussion**

Dismiss Notice

Join Physics Forums Today!

The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

# 2D Perspective xform using CSS 3D matrix?

**Physics Forums | Science Articles, Homework Help, Discussion**