如何转换文本元素，使其从左到右缩放更大？

Question

我尝试使用transform:scale和transform:skew都没有用，因为它们同时拉动整个轴，并且不允许输入左右两个参数。我唯一能想到的就是使用3D转换和透视，但我不能让它工作。

我试过的可怕的例子：https://codepend.io/fortypercentitanium/pen/yznleor

html prettyprint-override"><div class="container">
  <h1 class="text-cone">Player 1:</h1>
</div>

.container {
  background: red;
  display: flex;
  width: 400px;
  height: 200px;
}

.text-cone {
  font-size: 5rem;
/*   transform: scale(1, 0.6); */
/*   transform: skew(0deg, 15deg); */
/*   transform: rotateY(45deg); */
}

Answer 1

null

这里有一个例子：

null

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  color: black;
  font-size: 80px;
  font-family: sans-serif;
  font-weight: bold;
  transform: perspective(200px) rotateY(-60deg);
}

<h2>Some Text</h2>