我尝试使用transform:scale
和transform: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); */
}
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>