用 CSS 将文本转换为梯形

Question

我正在尝试创建一个包含 3 行文本的效果。中间的文字表示“现在”。底部的文字表示“昨天”，上面的文字表示“明天”。 “效果”是文本位于鼓上，鼓旋转以显示“现在”，同时还允许观看者看到之前和即将到来的文本。

示例：

我认为基于 Mozilla 上的这个示例这是可能的（单击并拖动 X 旋转）： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transforms

我尝试了多种方法，但它们都只是使文本变小、变大或倾斜（使其看起来像斜体）。

附注我在这里发现的这些问题仅涉及文本后面的形状绘制 - 而不是文本本身。

Answer 1

您可以使用

rotateX

属性沿 X 轴旋转文本来实现此效果。但它是等轴测视图。要增加深度，您应该将

perspective

属性应用于文本元素的父元素：

您可以这样做：

.text {
    font-size: 3rem;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rotate-up {
    transform: rotateX(30deg);  /* Rotates the element 30 degrees along the X-axis */
}

.rotate-down {
    transform: rotateX(-30deg);  /* Rotate in the opposite direction */
}

.three-d {
    perspective: 120px;  /* Adds a 3D perspective effect on the parent*/
}

<div class="container">
    <div class="three-d"><div class="text rotate-up">Tomorrow</div></div>
    <div><div class="text">Now</div></div>
    <div class="three-d"><div class="text rotate-down">Yesterday</div></div>
</div>