html - 字体 CSS 的透视失真

Question

我正在尝试实现某些文本的透视变形。我已经研究过变换 - 透视图， mask 等。但不知何故我似乎没有找到甚至没有办法做到这一点。 它应该看起来像引号中的文字 here

这是我目前所拥有的:

.blog-grid {
    display: grid; }
    .blog-grid a.single-blog {
      display: grid;
      grid-template-columns: 5fr 4fr;
      margin-bottom: 50px;
      text-decoration: none; }
      .blog-grid a.single-blog:hover {
        cursor: pointer; }
      .blog-grid a.single-blog .blog-image {
        grid-column: 1 / span 1;
        background-size: cover;
        background-position: center;
        background-color: lightblue;}
        .blog-grid a.single-blog .blog-image:before {
          padding-bottom: 100%;
          content: '';
          display: inline-block; }
      .blog-grid a.single-blog .blog-info {
        display: grid;
        grid-template-rows: 1fr 6fr 2fr;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 0 40px;
        color: #00329B; }
        .blog-grid a.single-blog .blog-info .blog-category {
          letter-spacing: 5px;
          font-size: 15px;
          text-align: center;
          text-transform: uppercase;
          font-weight: 600; }
        .blog-grid a.single-blog .blog-info .quote-box {
          position: relative;
          display: inline-block;
          transform: rotate(-3.5deg);
          -ms-transform: rotate(-3.5deg);
          -webkit-transform: rotate(-3.5deg);}
          .blog-grid a.single-blog .blog-info .quote-box .quote {
            font-size: 50px;
            font-weight: 100;
            font-style: italic;
            position: relative; }

<div class="blog-grid">
  <a href="http://fabis-mac.local:5757/test-blog-drei/" class="single-blog" cat_id="3" style="height: 727px;">
    <div class="blog-image"></div>
    <div class="blog-info">
      <p class="blog-category">Menschen</p>
      <div class="quote-box"><span class="quote">Ich liebe mein Fahrrad mehr als meine Frau</span></div>
    </div>
  </a>
</div>

我希望我的问题很清楚并且我提供了足够的信息，否则我愿意接受反馈并准备提供更多信息。 感谢您的帮助!

Answer 1

我想你想做的是同时使用 skew 和 rotate css 转换。

我还在测试时将字体系列更改为无衬线字体并删除了斜体字体样式，因此我可以更加确定直线。

如果您以相同的量倾斜和旋转，对于您想要的直线，效果应该相互平衡。

/* ---- This is the area to look at --- */
.blog-grid a.single-blog .blog-info .quote-box {
  position: relative;
  display: inline-block;
  transform: skew(-3.5deg) rotate(-3.5deg); 
  -ms-transform: skew(-3.5deg) rotate(-3.5deg);
  -webkit-transform: skew(-3.5deg) rotate(-3.5deg);
}
.blog-grid a.single-blog .blog-info .quote-box .quote {
  font-size: 50px;
  font-weight: 100;
  position: relative;
  font-family: sans-serif;
}

/* Copied from your post */
.blog-grid {
  display: grid;
}
.blog-grid a.single-blog {
  display: grid;
  grid-template-columns: 5fr 4fr;
  margin-bottom: 50px;
  text-decoration: none;
}
.blog-grid a.single-blog:hover {
  cursor: pointer;
}
.blog-grid a.single-blog .blog-image {
  grid-column: 1 / span 1;
  background-size: cover;
  background-position: center;
  background-color: lightblue;
}
.blog-grid a.single-blog .blog-image:before {
  padding-bottom: 100%;
  content: "";
  display: inline-block;
}
.blog-grid a.single-blog .blog-info {
  display: grid;
  grid-template-rows: 1fr 6fr 2fr;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 40px;
  color: #00329b;
}
.blog-grid a.single-blog .blog-info .blog-category {
  letter-spacing: 5px;
  font-size: 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
}

<div class="blog-grid">
  <a href="http://fabis-mac.local:5757/test-blog-drei/" class="single-blog" cat_id="3" style="height: 727px;">
    <div class="blog-image"></div>
    <div class="blog-info">
      <p class="blog-category">Menschen</p>
      <div class="quote-box"><span class="quote">Ich liebe mein Fahrrad mehr als meine Frau</span></div>
    </div>
  </a>
</div>