提问者:小点点

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


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

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

<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); */
}

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