Css 文本角度，使其在图像上看起来更自然

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

HTML

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

---

非常感谢所有建议。

尝试使用transform旋转文本怎么样

比如：

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

---

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

更多关于变换的信息

#包装器{
位置：相对位置；
}
梅因皮克蒂特尔先生{
位置：绝对位置；
顶部：200px；
左：100px；
字体大小：50px；
颜色：#000000；
z指数：2；
变换样式：保留-3d；
变换：rotateX（-65度）rotateY（2度）；
}
img{
位置：绝对位置；
排名：0；
左：0；
}

如何使此文本具有适合墙的角度？

使用转换程序

.mainPicTitle{
高度：350px；
宽度：550px；
背景色：rgba（255,0,0,0.5）；
填充：50px；
填充顶部：20px；
变换：rotateX（0）rotateY（-30度）rotateZ（-2度）；
}

---

如何使此文本具有适合墙壁的角度？

实际上，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);
}

代码笔：

如果确实不想更改跨度元素，请更改跨度的显示类型-

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

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