title: How to match 3D perspective of real photo and object in CSS3 3D transforms
body: <p><strong>The situation:</strong></p>
  
  <p>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).</p>
  
  <p><strong>The problem:</strong></p>
  
  <p>I wasn't able to precisely match the two using manual method aka typing rotation value and watching what it does.</p>
  
  <p><strong>Ideal solution #1</strong></p>
  
  <p>Online visual <strong>tool</strong> exists that lets you drag corners of the photo (like photoshop does) and It gives you the correct CSS3 transform values.</p>
  
  <p><strong>Ideal solution #2</strong></p>
  
  <p>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.</p>
  
  <p><strong>Real solution of this question</strong></p>
  
  <p>If there aren't such tools (my search found none) I would like somebody to try <strong>explain</strong> the math behind it so I could calculate it myself - If it is even <strong>possible</strong>?</p>
  
  <p>I prepared JSFiddle demo for you fiddle around:
  <a href="https://jsfiddle.net/marakoss/67ov5h8k/" rel="noreferrer">Demo</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div class="frame"&gt;
      &lt;img src="http://cdn.idesigned.cz/img/cc08acc7b9b08ab53bf935d720210f13.png" /&gt;
    &lt;/div&gt;
  
    &lt;div class="photo"&gt;
      &lt;div class="transform"&gt;
        &lt;img src="https://static.pexels.com/photos/7976/pexels-photo.jpg" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>