# Guessing a 3D rotation's parameters?

I have 2 images I need to combine (actually in HTML but I need help with getting the rotation), one is a mockup of an iPhone with an angle, and the other is a screenshot with no angle. I need to guess the rotation of the screenshot to make it fit in the phone's screen area. I can't use skew because that's not available in HTML / CSS (the skew that is available is different that what I need to achieve).

See below images:

So I need to somehow rotate the screenshot in 3D space to make it have an identical perspective with the phone's screen. Anyone knows of a simple and straightforward way?

• Its sometimes called a corner pin and you can find a implementation here, note that this is more of a stackoverfliw question than a GD kind of question. Dec 17, 2016 at 15:01
• I was thinking to get the coordinates in Photoshop or Sketch as there is no way to do that in CSS. Thanks for the comment, I'll look it up Dec 18, 2016 at 1:18
• My coint is its perfectly possible to do this in a browser with javascript setting up the css. But sure you can do this in photoshop if you want to do more work. Dec 18, 2016 at 6:47
• here is a guesstimate done quickly with method outlined in link in my first comment. Its slightly off but quite good. Dec 18, 2016 at 17:46
• Hey thanks for the link. I did ended up using the code provided in your first comment. Very handy for this kind of stuff. Thanks a lot! Dec 19, 2016 at 3:19

Take a look here, with `skew(XXdeg,XXdeg)` you can achieve exactly this in Photoshop.

## EDIT:

Here is some css code that does that:

``````.transform {

transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
transform-origin: 0% 0%;
perspective: 200;-webkit-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
-webkit-transform-origin: 0% 0%;
-webkit-perspective: 200;
-webkit-perspective-origin: 50% 50%;
-moz-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
-moz-transform-origin: 0% 0%;
-moz-perspective: 200;
-moz-perspective-origin: 50% 50%;
-o-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
-o-transform-origin: 0% 0%;
-o-perspective: 200;
-o-perspective-origin: 50% 50%;
-ms-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
-ms-transform-origin: 0% 0%;
-ms-perspective: 200;
-ms-perspective-origin: 50% 50%;
transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
transform-origin: 0% 0%;
perspective: 200;
perspective-origin: 50% 50%;
}
``````

You might want to play with attributes to make it fit, this link might just help you get there via GUI.

Here is a fiddle you just need to tweak it.

• Yes, skew does distort the image but it does so by maintaining an "isomorphic"-ish proportion of the sides. So each parallel sides will have the same line length. On the other hand, with distort, or matrix3d as @joojaa stated in his comment, the position of the vertexes, and the length of any sides are independent of each other... Skew is not the solution. Thanks for the link to the tool, but the tool that joojaa included in his comment is more useful in my case. Please have a look at it so you understand what I'm trying to achieve goo.gl/saniVd Dec 20, 2016 at 3:28
• At first place is not great way to do it with css, is better to create it with ImageMagick and just display it there, why you are leaving all transformations to client side. fmwconcepts.com/imagemagick/skew/index.php
– Flak
Dec 21, 2016 at 15:40
• as I said, skew is NOT the solution. Please have a look at this image and understand the difference between skew and distort(which can be done with matrix3d) tutorial9.s3.amazonaws.com/uploads/2008/04/… Dec 21, 2016 at 17:33
• with skew, each PARALLEL lines will always have the SAME LENGTH. With distort, the length of any sides are INDEPENDENT from each another... Dec 21, 2016 at 17:34
• and secondly, I will have some HTML elements in the screenshot for animation purposes. So I can't just render a skewed image and put it there.. It cannot be animated that way... Dec 21, 2016 at 17:35