Search code examples
csstransform

Transform text with CSS into a trapezoid

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 (made in Photoshop):

Made in Photoshop

I think this is possible based on this example on Mozilla (click and drag on the X rotation).

The problem is that whatever 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.

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>

These questions I've found on here only deal with drawing of shapes behind the text - not the text itself.

Solution

  • You can achieve this effect using the rotateX property to rotate the text along the X-axis. But it is in an isometric view. To add depth, you should apply the perspective property to the parent element of the text elements.

    This is how you can do it:

    .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    perspective: 200px;  /* Adds a 3D perspective effect on the parent*/
}

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

.rotate-down {
    transform: rotateX(-30deg);  /* Rotate in the opposite direction */
}
    <div class="container">
    <div class="rotate-up">Tomorrow</div>
    <div>Now</div>
    <div class="rotate-down">Yesterday</div>
</div>