I was not able to find a tool that will do that, so I'm asking how to do this myself.
I have an image of a laptop:
and I want to fit a div inside the laptop screen that will be in proper perspective.
What is the approach to do that? Can I use some Math to draw the lines and calculate proper transformation? I would like to have this div as close to the frame of the laptop.
I've tried to do this by experimentation, but the transformation is not quite right. NOTE:* I don't know exactly how rotate3D works I just tweak it until it looked about right, I would like to know how should I change the rotate3D so works for this case and it's useful for others that need a similar thing.
The code below is not exactly correct, I've tried to put my code from CodePen to Stack Snippets but the code changes depend on the width of the page, and it's different when you edit and run the snippets. To see my exact code look at the CodePen demo at the end of the post.
body {
margin: 0;
}
.laptop {
background: url(https://i.stack.imgur.com/8xU2w.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100vw;
height: 600px;
}
#screen {
background: red;
position: absolute;
left: 50%;
width: 357px;
transform: rotate3d(1, 5, 2, 347deg)
translatex(-50%);
transform-style: preserve-3d;
top: 116px;
margin-left: -41px;
height: 251px;
}<div class="laptop">
<div id="screen"></div>
</div>I would have an answer for this particular case but it would be nice for future readers to have a general algorithm (steps) on how to approach this problem and fit a div into a 3D image.
I would like to have real 3D, not clip-path like in answer to Match image perspective With css 3D transform. I don't want to use clip-path because I want to match real things into the screen. I want to put the terminal emulator screen there see Codepen, the match is very close but I want to know how to make it exactly the same.
