字体透视失真 CSS
Perspective Distortion of Font CSS
我正在尝试实现某些文本的透视变形。我已经研究过变换 - 透视图,遮罩等。但不知何故我似乎没有找到甚至没有办法做到这一点。
它应该看起来像引号中的文字
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>
我希望我的问题很清楚并且我提供了足够的信息,否则我愿意接受反馈并准备提供更多信息。
感谢您的帮助!
我想你想做的是同时使用 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>
我正在尝试实现某些文本的透视变形。我已经研究过变换 - 透视图,遮罩等。但不知何故我似乎没有找到甚至没有办法做到这一点。 它应该看起来像引号中的文字 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>
我希望我的问题很清楚并且我提供了足够的信息,否则我愿意接受反馈并准备提供更多信息。 感谢您的帮助!
我想你想做的是同时使用 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>