title: Using perspective and transform ruins my site at different resolutions
body: <p>I'm trying to create a 3D responsive mockup for a sign with <code>perspective</code> and <code>transform</code>, but I'm having some difficulty.</p>
  
  <hr>
  
  <p>This is what I'm trying to do:</p>
  
  <p><a href="https://i.stack.imgur.com/MDqKu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MDqKu.jpg" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>It looks good but when I'm changing my screen size it looks terrible:</p>
  
  <p><a href="https://i.stack.imgur.com/BlVZA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BlVZA.png" alt="enter image description here"></a></p>
  
  <p>I really don't know how to make it responsive.</p>
  
  <p>This is my code up to now:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Pacifico');
  
  * {
    padding: 0;
    margin: 0;
    font-family: 'Pacifico', cursive;
  }
  
  .mockup {
    position: relative;
    width: 100%;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-perspective: 500px;
    perspective: 500px;
  }
  
  .mockup--background {
    width: 100%;
  }
  
  .mockup--crop {
    position: absolute;
    top: 30%;
    left: 14%;
    width: 52%;
    padding: 1.8% 0;
    font-size: 3em;
    text-align: center;
    background: rgb(141,126,127);
    color: #fff;
    text-shadow:  -1px 0px #bab1b2,
                  -2px 1px #bab1b2,
                  -3px 2px #bab1b2,
                  -5px 3px #bab1b2,
                  -5px 4px #bab1b2,
                  -6px 5px #bab1b2;
    background: -moz-linear-gradient(45deg, rgba(141,126,127,1) 0%, rgba(169,160,165,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(141,126,127,1) 0%,rgba(169,160,165,1) 100%);
    background: linear-gradient(45deg, rgba(141,126,127,1) 0%,rgba(169,160,165,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d7e7f', endColorstr='#a9a0a5',GradientType=1 );
  }
  
  .perspective {
    transform: rotateY(22deg) rotateX(6deg) skewY(22deg) skewX(-2deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mockup"&gt;
    &lt;img class="mockup--background" src="https://designshack.net/wp-content/uploads/screenshot_1-o-1024x681.png" /&gt;
    &lt;div class="mockup--crop perspective"&gt;
      Mock Up
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="https://fiddle.jshell.net/zeevkatz/taqb8rvw/" rel="nofollow noreferrer">Fiddle demo</a></strong></p>