-2

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.

Improve this question
0

2 Answers 2

Reset to default
1

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.

Improve this answer
0
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>

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.