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.

  • 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 Mar 9 '17 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 Mar 9 '17 at 22:18
  • 1
    Here is tool for generating corner pins – joojaa May 16 '17 at 18:05
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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