transform: translateX

実行結果

ハンバーガメニュー㈢

    <div class="Hamburger-menu">
      <input type="checkbox" id="input">
      <label for="input">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </label>
      <div id="content3">
        1
        2
        3
        4
      </div>
    </div>    

    CSS
    input{
      display: none;
    }
    .line{
      width: 20px;
      height: 3px;
      background-color: black;
      margin: 3px;
    }
    #content3{
      margin: 0px;
      background-color: pink;
      width: 200px;
      height: 100px;
      transform: translateX(-300px);
      ＊-200ではmarinの文が残ってしまいます。
    }
    #input:checked ~ #content3{
      transform: translateX(0px);
    }
    @media screen and (min-width:740px){
      .Hamburger-menu{
      display: none;
      }
    }