斜めにした要素の画像のむきを戻すためskew を設定しても効きません

画像を斜めにして横に並べています。

flex で画像を並べて、li 要素に　skew を設定しました。
個別の画像をskew を設定して元に戻すように記述したのですが戻りません。

どうしたら、画像の向きを斜めからもどせるのでしょうか？

試した事
個別の画像を設定したclass 要素にそれぞれ　skew を設定したけど戻りませんでした。

<section id="classes">
<div class="content">
<h2 class="section-title color-white">
  <span class="en">CLASSES</span><!-- /.en -->
  <span class="ja">クラス紹介</span><!-- /.ja -->
   </h2><!-- /.section-title -->
   <ul class="class-box-list">
    <li class="bg-kid-class">
     <h3 class="class-name">キッズクラス</h3></li>
    <li class="bg-beginner-class">
     <h3 class="class-name">初心者クラス</h3>
    </li>
    <li class="bg-general-class">
     <h3 class="class-name">一般クラス</h3>
    </li>
    <li class="bg-lady-class">
     <h3 class="class-name">女性クラス</h3>
    </li>

   </ul>














</div><!-- /.content -->





</section><!-- /#classes -->


/*-------------------------------------------
classes
-------------------------------------------*/

#classes .content{
 position: relative;
height:500px;
width:1440px;
background-color: #F75E5E;
}



#classes .content .section-title{
 position:absolute;
 top:50px;
 left:30px;
 z-index:5;
}

#classes .class-box-list{
 position: absolute;
  display:flex;
}

#classes .class-box-list li{
 width:280px;
 height:500px;

 display:inline-block;
 transform:skewX(-20deg);

  overflow:hidden;
}
#classes .content .class-name{
 font-size: 1.5rem;
    font-weight: bold;
    width:100%;
    position: absolute;
    top: 50%;
   text-align:center;
}



#classes .class-box-list li::before{
 content: "";
    position: absolute;
      z-index: -1;
 background-color:rgba(0,0,0,.5);
            width:280px;
      height:500px;
}




.bg-kid-class{
 background:url("https://placeimg.com/280/500/animals");
  transform:skewX(20deg);
}
.bg-beginner-class{
 background:url("https://placeimg.com/280/500/arch");
  transform:skewX(20deg);
}
.bg-general-class{
 background:url("https://placeimg.com/280/500/nature");
  transform:skewX(20deg);
}
.bg-lady-class{
 background:url("https://placeimg.com/280/500/people")
   transform:skewX(20deg);
}

codepenのURL