css - 使用透视图和变换以不同的分辨率破坏了我的网站

我正在尝试使用perspective和transform为标牌创建3D响应模型，但是遇到了一些困难。



这就是我想要做的：





看起来不错，但是当我更改屏幕尺寸时，看起来很糟糕：



我真的不知道如何使它响应。

到目前为止，这是我的代码：

@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

最佳答案

经过大量微调后，我认为它非常合适

Fiddle

HTML现在仅包含两个元素

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

我删除了img标记，因为该图像显然是背景图像，因此我认为将其移至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的底部填充为66.5％，即图像的比例（100 /（1024/681））。它还具有150vw的角度。这是我在调整转换等时所得到的一个值。

我已经将.mockup--crop的左上角移到了背景中符号的左上角，并给了它perspective-origin: 0 0;，以便可以轻松地用固定的正确点对其进行变换。其余的不言自明。

#noJavaScript