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

有关变换here的更多信息。

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

实际上，CSS转换不适用于嵌入式元素。您可以做的是将span更改为p标签并添加旋转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;
  transform: rotateZ(4deg);
}

Codepen：https://codepen.io/ashfaq_haq/pen/pooamYO

如果您真的不想更改span元素，则更改span的显示类型-

.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;
   display: block;      
   transform: rotateZ(4deg);
}

如何尝试使用transform旋转文本？

类似的东西：

.mainPicTitle{
  -ms-transform: rotate(-4deg); /* IE 9 */
  -webkit-transform: rotate(-4deg); /* Safari prior 9.0 */
  transform: rotate(-4deg); /* Standard syntax */
}

使用变换属性

.mainPicTitle{
height:350px;
width:550px;
background-color:rgba(255,0.5);
padding:50px;
padding-top:20px;
transform: rotateX(0) rotateY(-30deg) rotateZ(-2deg);

}

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