I'm trying to create an effect where I have 3 lines of text. The text in the middle signifies the "now". The text on the bottom signifies "yesterday" and text above signifies "tomorrow". The "effect" is that the text is on a drum that rotates to display the "now" while also allowing the viewer to see previous and upcoming text.
Example (Mademade in photoshopPhotoshop):
I think this is possible based on this examplethis example on Mozilla (click and drag on the X rotation): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transforms.
The problem is that Whateverwhatever I try using rotation does that, it rotates the text, make the text smaller, larger or skews it (make it look like italics), instead of allowing me to change the "shape" of the text. Changing the shape is apparently possible based on the link I shared. However, I am not able to find out how to do that, hence the request for help.
I want CSS to allow me to change the shape of the text (as illustrated in the image above).
This is my code. This doesn't work (it squashes it vertically, but there's no shortening of the top of the text):
<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>
<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>
P.S. theseThese questions I've I've found on here only deal with drawing of shapes behind the text - not the text itself.
