0

I'm not a graphic designer and my photoshop/illustrator knowledge are near to zero.

I have an image like this one:

enter image description here

And I need to find the screen (not monitor) perspective, perspective origin and xyz rotation angles.

What I try to achieve is to fit onto monitor screen some html block transformed with css.

Is there a way to find this info using photoshop/illustrator? Can someone explain how to do this if possible or point me to a good tutorial that will explain. What I found on google is how to rotate an image but not how to get the info mention above.

Improve this question
3
  • Hi Mirceac21, welcome to GD.SE! What is your end goal? Do you want to superimpose an image over the monitor or are you only interested in getting the perspective change from a flat image?
    – AndrewH
    Commented Mar 9, 2017 at 22:13
  • I don't want to change the image at all. I want to superimpose an html block with dynamic content over the monitor screen and use css to rotate that block to appear like is the monitor screen. That's why I need the screen perspective and axis rotation.
    – Mirceac21
    Commented Mar 9, 2017 at 22:18
  • 1
    Here is tool for generating corner pins
    – joojaa
    Commented May 16, 2017 at 18:05

2 Answers 2

Reset to default
2

You should do it with CSS perpective properties. Simply you need a DIV and an Iframe inside. Both using same Class with same perspective properties. Then call your html page inside Iframe then it will be displayed in 3d. Transform properties of perpective values should be determined with working with the image you gave. You can just use trial-error method to find angles.

enter image description here

Here is a good guide to CSS perspective information CSS 3d I hope it helps.

Improve this answer
2

I've created a demo for my needs that use a solution from How to match 3D perspective of real photo and object in CSS3 3D transforms by @szym that uses matrix calculation to get exact fit.

Here is the CodePen demo using this tool you can change the image and fit a div (you can do the same with iframe) and get CSS transform that you can use to fit the div or iframe into a photo.

Improve this answer
1
  • That is really cool :o)
    – Rafael
    Commented Sep 7, 2021 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.