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

Question

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

这就是我想要做的事情：

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Fiddle demo

Answer 1

经过大量的微调，我认为我已经完全适应了

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