如何通过CSS将文本变换为梯形，实现滚筒式文本展示效果？

我想要实现一个三行文本的滚筒旋转效果：中间文本代表“当前”，底部文本代表“过去”，顶部文本代表“未来”。旋转滚筒时，既能展示“当前”文本，也能看到前后的文本。

效果示例（Photoshop制作）：

我参考了Mozilla的CSS变换示例（支持X轴旋转拖拽），认为该效果可实现。但尝试使用rotation相关属性时，仅能旋转、缩放或倾斜文本（使文本呈斜体样式），无法改变文本形状。

以下是我的代码，未能实现预期效果（仅垂直压缩元素，未让文本顶部缩短呈现梯形）：

<html>
<head>
<style>
body {
  background-color:#E7E9EB;
}
#myDIV {
  height:300px;
  background-color:#FFFFFF;
}
#blueDIV {
  position:relative;
  width:100px;
  padding:10px;
  background-color:lightblue;
  transform: rotateX(45deg);
}
</style>
</head>
<body>

<h1>The transform property</h1>

<div id="myDIV">
<div id="blueDIV">THIS</div>
</div>

</body>
</html>

我找到的相关问题仅涉及在文本后方绘制形状，未针对文本本身的形状变换。

内容的提问来源于stack exchange，提问作者Jim