Zeev Katz Zeev Katz - 29 days ago 11
CSS Question

Using perspective and transform ruins my site at different resolutions

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:

enter image description here




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

enter image description here

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

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