The situation:
In my particular case I have 3D photoframe image and a 2D photo. And I want the 2D photo to match the 3D frame using CSS3 transform functions (Rotate, Scale, Skew).
The problem:
I wasn’t able to precisely match the two using manual method aka typing rotation value and watching what it does.
Ideal solution #1
Online visual tool exists that lets you drag corners of the photo (like photoshop does) and It gives you the correct CSS3 transform values.
Ideal solution #2
Non-visual tool exist – same as before but you manually enter 4 point coordinates (image corners) and it gives you the correct CSS3 transform values.
Real solution of this question
If there aren’t such tools (my search found none) I would like somebody to try explain the math behind it so I could calculate it myself – If it is even possible?
I prepared JSFiddle demo for you fiddle around:
Demo
/* Main issue here */
.transform {
transform: rotateX(34deg) rotateZ(13deg) rotateY(-10deg) scaleY(1) scaleX(1) skewY(0deg) skewX(0deg) translateY(0px) translateX(20px);
transform-origin: 50% 0% 0;
}
/* Supporting styles */
.container {
position: relative;
width: 500px;
height: 500px;
}
.frame,
.photo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo {
top: 50px;
left: 95px;
right: 65px;
bottom: 270px;
}
.frame img,
.photo img {
width: 100%
}
.frame {
z-index: 2;
}
<div class="container">
<div class="frame">
<img src="http://cdn.idesigned.cz/img/cc08acc7b9b08ab53bf935d720210f13.png" />
</div>
<div class="photo">
<div class="transform">
<img src="https://static.pexels.com/photos/7976/pexels-photo.jpg" />
</div>
</div>
</div>
4
Answers
I can imagine that it is difficult to find a tool or formula for this.
If you know the angles and measures of the book it is easy to calculate I think.
W3C Working Draft here you can find more detailed information about the transformations
but as I said, without the details of your image (the book) I have no idea how you could calculate the exact coordinates.
The only thing that could help you is the css perspective.
I have made a Plunk that you can see how it looks like with it.
The only things that I changed are:
and
The photo doesn’t fit exactly in the frame because it’s a square but
I hope that helps you a bit further.
If you can use 3-d transforms (such as
rotateZ
), then you can also providematrix3d
which you can compute from desired point correspondences.Here’s a fiddle: https://jsfiddle.net/szym/03s5mwjv/
I’m using numeric.js to solve a set of 4 linear equations to find the perspective transform matrix that transforms
src
ontodst
. This is essentially the same math as ingetPerspectiveTransform
in OpenCV.The computed 2-d perspective transform is a 3×3 matrix using homogeneous coordinates. The CSS
matrix3d
is a 4×4 matrix using homogeneous coordinates, so we need to add an identity row/column for thez
axis. Furthermore,matrix3d
is specified in column-major order.Once you get the
matrix3d
you can just paste it into your stylesheet. But keep in mind that the matrix is computed assuming(0, 0)
as origin, so you also need to settransformOrigin: 0 0
.I’ve written an answer on Math SE about how to compute the transformation matrix to map the corners of one image to four given coordinates using a projective transformation. It has details of what’s actually going on in that computation. It also has some CSS and I adapted the original demo to your example scenario:
The formulation is such that you can make it working with merely three arithmetic operations:
+
,-
and*
. You don’t even need/
(if you use adjunct instead of inverse matrices), much less case distinctions, square roots, or any other such things.If you prefer Stack Overflow (and to get a cross reference established), see Redraw image from 3d perspective to 2d.
Based on @szym code I’ve created a demo for my needs that can be improved. The code uses draggable points so it’s easier to find the points and calculate the matrix. Also the matrix is printed on the left.
See demo in Action I use it to match jQuery Terminal into an image of a laptop.