<body>
  <div class='mobile-nav'><a href='#'>Menu</a></div>
  <section class='sidebar-menu'>
    <div>
      <h1>CSS Transform</h1>
    </div>
    
    <div>
      <nav>
        <ul>
          <li><a href='#rotate'>Rotate</a></li>
          <li><a href='#rotateX'>RotateX</a></li>
          <li><a href='#rotateY'>RotateY</a></li>
        </ul>
        <ul>
          <li><a href='#scale'>Scale</a></li>
          <li><a href='#scaleX'>ScaleX</a></li>
          <li><a href='#scaleY'>ScaleY</a></li>
        </ul>
        <ul>
          <li><a href='#skew'>Skew</a></li>
          <li><a href='#skewX'>SkewX</a></li>
          <li><a href='#skewY'>SkewY</a></li>
        </ul>
      </nav>
    </div>
    
  </section>
  
  <section class='content-body'>
    <div><div>No effect</div></div>
    <div id='rotate'>
      <div class='rotate'>340deg rotate</div>
     </div>
    <pre>
    {
    transform: rotate(340deg);
    }</pre>
    <div id='rotateX'>
      <div class='rotateX'>Rotate X 180deg</div>
    </div>
    <pre>
    {
    transform: rotateX(180deg);
    }</pre>
    <div id='rotateY'>
      <div class='rotateY'>Rotate Y 180deg</div>
    </div>
    <pre>
    {
    transform: rotateY(180deg);
    }</pre>
    <div id='scale'>
      <div class='scale'>Scale 1.3</div>
     </div>
    <pre>
    {
    transform: scale(1.3);
    }</pre>
    <div id='scaleX'>
      <div class='scaleX'>Scale X 1.3</div>
    </div>
    <pre>
    {
    transform: scaleX(1.3);
    }</pre>
    <div id='scaleY'>
      <div class='scaleY'>Scale Y 1.3</div>
    </div>
    <pre>
    {
    transform: scaleY(1.3);
    }</pre>
    <div id='skew'>
      <div class='skew'>Skew 340deg</div>
    </div>
    <pre>
    {
    transform: skew(340deg);
    }</pre>
    <div id='skewX'>
      <div class='skewX'>Skew X 340deg</div>
    </div>
    <pre>
    {
    transform: skewX(340deg);
    }</pre>
    <div id='skewY'>
      <div class='skewY'>Skew Y 340deg</div>
    </div>
    <pre>
    {
    transform: skewY(340deg);
    }</pre>
    
  </section>
  
  
</body>
html{
  scroll-behavior:smooth;
}

.mobile-nav{
  width:0;
  height:50px;
  position:fixed;
  top:0;
  left:0;
  text-align:right;
  background-color:transperant;
  font-size:26px;
  z-index:10;
  overflow:hidden;
}  
 .mobile-nav a{
    color:black;
    text-decoration:none;
    padding:10px;
    background-color:white;
    margin-right:10px;
    border:1px solid blue;
    border-radius:10px;
  }

.sidebar-menu{
  position:fixed;
  top:0;
  left:0;
  width:300px;
  min-height:100%;
  overflow:scroll;
  background-color:#22312E;
  color: white;
  transition:width 1s;  
}
 .sidebar-menu h1{
    text-align:center;
  }
  .sidebar-menu ul{
    display:block;    
    padding:10px;
}
    ul a{
      display:block;
      padding:10px;
      box-shadow: 0px 1px 3px silver;
      color:white;
      text-decoration:none;
    }
    ul a:hover{
      font-size:20px;
      background-color:red;
      transition: font-size 1s, background-color 1s;
    }
  


.content-body {
  background-color:#D9FAF4;
  width:auto;
  height:100%;
  margin-left:300px;
  display:flex;
  flex-direction:column;
}
 .content-body div{
    min-height:100%;
    padding:10px;
    background-color:teal;
    margin-top:20px;
}
         
 .content-body div div{
      width:300px;
      height:200px;
      background-image:linear-gradient(to bottom, red, blue, orange);
      margin:auto;
      font-size:30px;
      color:white;
      text-align:center;
    }

 .rotate{
      transform:rotate(340deg)
    }
    .rotateX{
      transform:rotateX(180deg)
    }
    .rotateY{
      transform:rotateY(180deg)
    }
    .scale{
      transform:scale(1.3);
     }
    .scaleX{
      transform:scaleX(1.3)
    }
    .scaleY{
      transform:scaleY(1.3)
    }
    .skew{
      transform:skew(340deg)
    }
    .skewX{
      transform:skewX(340deg)
    }
    .skewY{
      transform:skewY(340deg)
    }


@media screen and (max-width:600px){
  .sidebar-menu{
     width:0;
  } 
}
@media screen and (max-width:600px){
  .content-body{
    margin-left:0;
    margin-top:20px;
  }
}
@media screen and (max-width: 600px){
  .mobile-nav{
    width:100%;
    transition: width 1s;
  }
  
}
.toggle{
  width:100%;
  z-index:1;
  transition: width 2s;
}



$('.mobile-nav').on('click', ()=>{  
  $('.sidebar-menu').toggleClass('toggle');

});

$('.sidebar-menu a').on('click', ()=>{
  $('.sidebar-menu').removeClass('toggle');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js