css Question posted in
Some basic documentation can be found here.

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

I think this is possible based on this example on Mozilla (click and drag on the X rotation):
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transforms

I’ve tried a number of ways, but they all just make the text smaller, larger or skew it (make it look like italics).

P.S. these questions I’ve found on here only deal with drawing of shapes behind the text – not the text itself.

Edit

So instead of asking for more specific details in the comments, 2 of you have recommended that I close this, along with down-votes. If you’re really voting things like this down instead of moving on because you don’t know the answer, then I have nothing for you.

However, as the subtext of that close reason was:

The question should be updated to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem.

I’ll go ahead and provide exactly those for you.

1: The question should be updated to include desired behavior.

The desired behaviour is that I want CSS to allow me to change the shape of the text (as illustrated in the image above).

2: A specific problem or error.

The problem is that Whatever I try using rotation does that, it rotates the text or skews it, 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.

3: And the shortest code necessary to reproduce the problem.

Fair enough, no code was included, so here you go… 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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Here’s a better solution:

    • use perspective on the parent of the three children
    • set transform-origin bottom on the first child
    • set transform-origin top on the third child
    • use CSS rotate to i.e: 45deg on the X axis with values 1 (first child) and -1 (third child)
    .words {
  font-size: 2rem;
  perspective: 1000px; /* add perspective to the parent */
  width: max-content;
  margin: auto;
  
  > div {
    text-align: center;
    padding: 1rem;
    background: #ddd; 
    outline: 2px solid red;
    
    &:nth-child(1) {
      transform-origin: bottom;
      rotate: 1 0 0 45deg;    /* x y z angle */
    }
    &:nth-child(3) {
      transform-origin: top;
      rotate: -1 0 0 45deg;
    }
  }
}
    <div class="words">
  <div>Turn this</div>
  <div>into</div>
  <div>something</div>
</div>

    No need to create extra useless wrapping DIVs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search