css - Formula to match a div to a specific "3D" location in a background image -

i trying liven background image little using css 3d transformations, idea take proverbial "landing page full screen background image laptop has screenshot (in coffee shop)" , make more dynamic: instead of screenshot, put iframe actual live html page, , make fit photographed item in background image (e.g. laptop screen).

this has 2 challenges:

1. ability calculate location of points in background image solely based on screen size
2. ability 3d rotation match laptop screen in background image

this how background defined:

.splash {   text-align: center;   background-position: 50% 20%;   background-size: cover;   position: absolute;   top: 0;   bottom: 0;   left: 0;   right: 0;   background-image: url(/assets/themes/twitter/bootstrap/img/scala_tutorials_screenshot2.jpg); } 

background image size is: 1280 x 850

i've managed somehow overcome of these requirements in brute force way,

• left position in fixed % worked, due fact it's width larger it's height
• top position hardest: measured distance top of laptop screen top edge of browser window (it's absolute "top" value) , recorded screen width , height. , came 2 variables formula (using excel, linear regression trend line , basic math)

formula code:

 var w = window.innerwidth;  var h =  window.innerheight;  var = 0.0000146552*h - 0.0245612;  var b = 0.177328 * h + 9.0294;  console.log("formula: " + + " * w + " + b);  var top =  math.round(a * w +  b);  videl.style.top = top + "px";  videl.style.height = math.round((videl.offsetwidth / 1.438689132444542)) + "px"; 

however there multiple issues solution

1. it doesn't work on screen resolutions, background doesn't scale same resolutions, (especially in 4:3 ratios) background doesn't grow / shrink formula expects
2. it tedious work again if let's have different screenshot, solution not generic
3. even if know exact coordinates of 4 points of laptop screen in image, don't have way in css put div on it, had experiment rotatex, rotatey , rotatez (and perspective-origin) able match, , match not exact
4. due perspective-origin quirks, need compensate larger screen leads ugly code this:

tweaking hacks (yes, know it's ugly, , can reduce / merge above formula somehow)

   if(w >= 1200) {       if(w < 1400) {         element.style.top = "-10px";       } else if (w < 1600) {         element.style.top = "-13px";       } else if (w < 1700) {         element.style.top = "-15px";       } else if (w < 1800) {         element.style.top = "-17px";       } else {         element.style.top = "-19px";       }      } else {       element.classname = "";     } 

example: can see have made far here requires screen width above 1200 pixels

the question:

1. is there way have generic formula, given original location in background image (e.g. 4 points of screen corners), given background image original size, background-position definition, screen width , height find new coordinates match background image?

2. i'd instead of doing guesswork on rotatex, y , z, able automatically calculate x, y , z rotation values, rotate div cover given set of 4 2d coordinates (e.g. laptop screen)

i'm sad see there aren't answers yet. you're trying do. don't think can tell complete enough answer, it's big comment, , rolling.

first, think math easier if can give points in original image 4 vertices (in addition original image size). because can figure out new points be, based on percentage along in original image, e.g.

xnew = xold / originalimagewidth * newimagewidth; ynew = yold / originalimageheight * newimageheight; 

i see you're putting of information possible in .css file. can save image path , 4 original points in data- attribute of element somewhere? let calculate new points. barring that, perhaps cheat , add them query string url.

your next problem angling image. don't think it's 3d transform - should more 2d skew along x-axis. check out skew matrix algorithm matrix transformation. can calculate scale used go 1 set of points other, , should make easy calculate skew angle, keeping bottom left of image fixed , top right variable solve for. can pass css-transform, , should give basics need.

you can check projective transformation. isn't answer need - takes skewed angle , turns rectangle - since need opposite functionality, may give ideas.

again, sorry isn't complete answer, might moving in right direction. can try talk through of didn't make sense.

good luck!