Skip to main content

Return to Answer

edited body
Source Link
Roko C. Buljan
Roko C. Buljan
  • 204.2k
  • 41
  • 321
  • 332

Here's a better solution:

  • use perspective on the parent of the three children
  • set transform-origin buttombottom on the first child
  • set transform-origin top on the third child
  • use CSS rotate to i.e: 53deg45deg on the X axis with values 1 (first child) and -1 (third child)

.words {
  font-size: 2rem;
  text-align: center;
  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.

Here's a better solution:

  • use perspective on the parent of the three children
  • set transform-origin buttom on the first child
  • set transform-origin top on the third child
  • use CSS rotate to i.e: 53deg on the X axis with values 1 and -1

.words {
  font-size: 2rem;
  text-align: center;
  perspective: 1000px; /* add perspective to the parent */
  width: max-content;
  margin: auto;
  
  > div {
    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.

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.

Source Link
Roko C. Buljan
Roko C. Buljan
  • 204.2k
  • 41
  • 321
  • 332

Here's a better solution:

  • use perspective on the parent of the three children
  • set transform-origin buttom on the first child
  • set transform-origin top on the third child
  • use CSS rotate to i.e: 53deg on the X axis with values 1 and -1

.words {
  font-size: 2rem;
  text-align: center;
  perspective: 1000px; /* add perspective to the parent */
  width: max-content;
  margin: auto;
  
  > div {
    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.