The formula corresponding to the div for a specific "3D" location in the background image

Question

I'm trying to animate my background image a bit using CSS 3D transforms, the idea was to take the notorious “landing page in full screen background image with a laptop that has a screenshot (in a cafe)” and make it more dynamic: instead of a screenshot, put iframe with real live HTML page and make it perfect for the photographed element in the background image (for example, on a laptop screen).

This has 2 problems:

• the ability to calculate the location of points in the background image only based on screen size
• the ability to make a 3D rotation that will fit the laptop screen in the background image.

Here's how the background is determined:

.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: 1280 X 850

I managed to somehow overcome some of these requirements, but in a very crude way,

• the left position in a fixed% worked, probably due to the fact that the width is greater than the height
• : I measured the distance from the top of the laptop screen to the top of the browser window (this is the absolute “top” value) and recorded the width and height of the screen. and came up with a formula of 2 variables (using excel, a linear regression trend line and some basic math).

Formula Code:

  var w = window.innerWidth; var h = window.innerHeight; var a = 0.0000146552*h - 0.0245612; var b = 0.177328 * h + 9.0294; console.log("formula: " + a + " * 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 are several problems with this solution.

• It does not work in all screen resolutions, the background does not scale in the same way as for some resolutions (especially in the 4: 3 ratio) the background does not grow and does not decrease, as the formula expects
• It is really a tedious job to do it again, if we say that I have a different screenshot, the solution is really not common
• Even if I know the exact coordinates of the 4 points of the laptop screen on the image, I don’t have a way in CSS to just put a div above it, I had to experiment with rotateX , rotateY and rotateZ (and perspective-origin ) to match, and the match is not exact.
• Due to some quirks from a perspective point of view, I need to compensate for the enlargement of the screen, which leads to some ugly code like this:

Thin hacks (yes, I know, this is ugly and probably can reduce it / merge with the 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: You can see what I have done so far here requires a screen width above 1200 pixels

Question:

• Is there a way to have a general formula that, for any given source location in the background image (for example, 4 points of screen corners), given the original size of the background image, the definition of background-position , screen width and height, to find the new coordinates corresponding to the background image?

• Instead of speculating on rotateX , Y, and Z, I would like to be able to automatically calculate the rotation values ​​of X, Y, and Z that will rotate the DIV to cover exactly a given set of 4 2D coordinates (e.g. laptop screen)

Answer 1

I am sad to see that there are no answers yet. I like what you are trying to do. I don’t think that what I can tell you is complete enough to be the answer, but it is too big for comments and hopefully will make you go for a ride.

Firstly, I think your math will be much simpler if you can specify points in the original image for four vertices (in addition to the size of the original image). Because then you can easily determine where the new points will be, based on what percentage they are in the original image, for example

 xNew = xOld / originalImageWidth * newImageWidth; yNew = yOld / originalImageHeight * newImageHeight; 

I see that you are currently adding as much of your information as possible to the .css file. Can you save the path to the image and the four source points of the data attribute of the element? This will allow you to calculate new points. The ban is possibly to spoof and add them to the query string to the URL.

Your next problem is image mapping. I don’t think this is a 3D transformation — it should just be a two-dimensional skew along the x axis. See the skew matrix algorithm for matrix transformation. You can calculate the scale that you used to go from one set of points to another, and this should make it quite easy to calculate the angle of inclination, keeping the lower left part of the image still and the upper right part a variable for which you need to solve. You can pass this as css-transform, and this should give you all the basics you need.

You can also check Projective Conversion . This is not the answer you need - it distorts the angle and turns it into a rectangle, but since you need the opposite functionality, this may give you some ideas.

Again, sorry, this is not a complete answer, but it can make you move in the right direction. I can try to tell you about this, which does not make sense.

Good luck