350D 350D - 1 year ago 94
CSS Question

Responsive matrix3D transformation

I'm trying to create responsive layout for my project where i have

image as a background and
screenshot for screen area. Example on JSFiddle. I've created
transformation here using fixed image sizes for background and screenshot images. As you can see — image perfectly aligned and
set to
and this transformation applied:

transform: matrix3d( 0.642387, -0.289132, 0, 0.000087, 0.456665, 0.32747, 0, -0.000096, 0, 0, 1, 0, 88, 256, 0, 1);

enter image description here

Now i'm trying to make it responsive to screen width but i can't figured it out to how fix incorrect proportions on smaller screen size or any other than close to original one (try to resize the JSFiddle window) that was used to create

enter image description here

Looks like
linked to element dimensions in pixels or maybe i'm wrong.


I have some progress here by trying to eliminate
part from
. I've moved
to 50% 50% too to make sure that all transformations applied in same way from the center of the image. Here is the updated toolkit state and new JSFiddle example. Still not perfect.


I've created simple UI to control all rotate/scale transformation here on JSFiddle and recropped iPhone image to make sure that center of the green screen (you can see cross lines in the middle) is in the same location as a screenshot center; Now i have more controls and more predictable results but still have problems with resizing.

enter image description here

Answer Source

Ok, I've implemented a perspective correction on window.resize and this is a solution in my case. Here is a final JSfiddle example. Still don't get the point how it helps but it works fine.