时间戳

首页 > 解决方案 > 文字的角度，使其在图像上看起来更自然

css - 文字的角度，使其在图像上看起来更自然

问题描述

使用 CSS，我想知道如何使该图像上的文本看起来更像实际图像上的文本？

在此处输入图像描述

HTML

<span className="mainPicTitle">How can i make this text angle so it suits the wall?</span>

CSS

.mainPicTitle {
   font-size: 40px;
   color: #000000;
   background-color: transparent;
   grid-column: 1 / 4;
   grid-row: 1/1;
   margin-top: 1em;
   justify-self: center;
   font-family: 'Alegreya Sans SC', sans-serif;
}

非常感谢所有建议。

标签： css

解决方案

您可以使用 css 3d 或倾斜变换规则将文本设置为所需的角度。我制作了一个大角度的示例片段，以显示您可能需要将角度设置为精确的效果。

更多关于这里的变换。

#wrapper{
position:relative;
}

.mainPicTitle {
  position:absolute;
  top:200px;
  left:100px;
  font-size: 50px;
  color: #000000;
  z-index:2;
  transform-style: preserve-3d;
  transform: rotateX(-65deg) rotateY(2deg);
}

img{
  position:absolute;
  top:0;
  left:0;
}
<div id="wrapper">
  <span class="mainPicTitle">How can i make this text angle so it suits the wall?</span>

  <img src="https://i.stack.imgur.com/cyUow.png">

</div>

推荐阅读