How to apply perspective to text in CSS

I am trying to bend the words like it's writing on the pipe. This is the example that I am trying to achieve.

I tried something like below.

header#home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
#home nav ul li {
    text-align: center;
    font-weight: 500;
    font-size: 11.5vw;
    color: #f8c291;
}

.a {
    position: relative;
    transform: translateZ(-11px) rotateX(62deg) rotateZ(0deg)!important;
    transform-style: preserve-3d;
    transform-origin: 0 0 0;
}
.b {
    position: relative;
    transform: translateZ(-11px) rotateX(52deg) rotateZ(0deg)!important;
    transform-style: preserve-3d;
    transform-origin: 0 0 0;
}
.c {
    position: relative;
    transform: translateZ(-11px) rotateX(42deg) rotateZ(0deg)!important;
    transform-style: preserve-3d;
    transform-origin: 0 0 0;
}
.d {
    position: relative;
    transform: translateZ(-11px) rotateX(49deg) rotateZ(0deg)!important;
    transform-style: preserve-3d;
    transform-origin: 0 0 0;
}

<header class="parts" id="home">   
    <nav>
        <ul>
            <li class="a">bend</li>
            <li class="b">this line</li>
            <li class="c">like a</li>
            <li class="d">pipe</li>
        </ul>
    </nav>                                
</header>

But couldn't make it properly. How can I make it look like in the example image? I mean proper bending.

Solution

You need to consider some perspective, try to make the transformation more symetric between element and apply a mask for the effect of transparency on the edges. Also removed some useless CSS.

header#home {
  display: flex;
  height: 100vh;
}

#home ul {
  margin: auto;
  padding: 0;
  text-align: center;
  font-weight: 500;
  font-size: 60px;
  color: #f8c291;
  -webkit-mask-image: linear-gradient(transparent, #fff 25% 75%, transparent);
  mask-image: linear-gradient(transparent, #fff 25% 75%, transparent);
  perspective: 200px;
  perspective-origin: center;
}

.a {
  transform: translateZ(-36px) rotateX(35deg);
}

.b {
  transform: translateZ(0) rotateX(24deg);
}

.c {
  transform: translateZ(26px);
}

.d {
  transform: translateZ(0) rotateX(-24deg);
}

.e {
  transform: translateZ(-36px) rotateX(-35deg);
}

<header class="parts" id="home">
  <ul>
    <li class="a">bend</li>
    <li class="b">this line</li>
    <li class="c">like a</li>
    <li class="d">pipe</li>
    <li class="e">another</li>
  </ul>
</header>