Using perspective and transform ruins my site at different resolutions

Question

I'm trying to create a 3D responsive mockup for a sign with perspective and transform, but I'm having some difficulty.

---

This is what I'm trying to do:

---

It looks good but when I'm changing my screen size it looks terrible:

I really don't know how to make it responsive.

This is my code up to now:

@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);
}

<div class="mockup">
  <img class="mockup--background" src="https://designshack.net/wp-content/uploads/screenshot_1-o-1024x681.png" />
  <div class="mockup--crop perspective">
    Mock Up
  </div>
</div>

Fiddle demo

Answer 1

After a lot of fine-tuning, I think I've got it fit perfectly

Fiddle

The HTML now only consists of two elements

<div class="mockup">
  <div class="mockup--crop">Mock Up</div>
</div>

I've removed the img tag because the image is clearly a background-image, so I figured it'd be semantically correct to move it to the CSS

.mockup{
  position: relative;
  perspective: 150vw;
  padding-bottom: 66.5%;
  background-image: url('https://designshack.net/wp-content/uploads/screenshot_1-o-1024x681.png');
  background-size: 100% 100%;
}

.mockup--crop {
  position: absolute;
  top: 16.125%;
  left: 17.5%;
  width: 63.2%;
  height: 28.8%;
  background-image: linear-gradient(to bottom right, #8D7E7F 0%, #A9A0A5 100%);
  text-align: center;
  font-size: 10vw;
  color: #FFF;
  text-shadow: -.1vw .1vw #BAB1B2,-.2vw .2vw #BAB1B2,-.3vw .3vw #BAB1B2,-.4vw .4vw #BAB1B2,-.5vw .5vw #BAB1B2,-.6vw .6vw #BAB1B2,-.7vw .7vw #BAB1B2,-.8vw .8vw #BAB1B2,-.9vw .9vw #BAB1B2,-1vw  1vw #BAB1B2;
  transform: rotateZ(18.7deg) rotateY(47.5deg) rotateX(32.9deg);
  transform-origin: 0 0;
}

.mockup has a padding-bottom of 66.5%, which is the ratio of the image (100 / (1024 / 681)). It also has a perspective of 150vw. This is a value I've come to as I was tweaking the transforms etc.

I've moved .mockup--crop's upper left corner to the upper left corner of the sign in the background, and gave it perspective-origin: 0 0;, so that I could easily transform it with a fixed, correct point. The rest is self explanatory.

#noJavaScript