从右侧显示纯CSS侧边栏导航

Question

我正在实现找到的here侧边栏，但是需要它从右侧滑入并且我不确定如何反转x轴的方向。

我认为可能会起作用的

#sidebar-nav {
    transform: translateX(calc(100%+244px));
    &:target {
        transform: translateX(100%);
    }
}

但这会导致页面宽度额外增加244px。

[Codepen] https://codepen.io/seanfree/pen/EgQRwg

完整代码：

HTML

html, body {
  width: 100%;
  color: white;
  font-family: "Roboto", sans-serif;
}

::-moz-selection {
  background: transparent;
}

::selection {
  background: transparent;
}

a {
  color: white;
  text-decoration: none;
}

#background {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/hot-air-balloons.jpg");
  background-size: cover;
  background-position: center center;
  opacity: 0.2;
}

#fab {
  position: fixed;
  z-index: 1;
  right: 30px;
  bottom: 30px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: #f55e22;
  box-shadow: 0 2px 8px #3f3f3f;
  text-align: center;
  line-height: 60px;
  font-size: 1.75em;
  cursor: pointer;
}
#fab:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

#page-header {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 60px;
  width: 100vw;
  background-color: #0a94ab;
  box-shadow: 0 -3px 8px 5px #3f3f3f;
}
#page-header #hamburger {
  position: relative;
  display: block;
  top: 15px;
  left: 15px;
  height: 30px;
  width: 30px;
}
#page-header #hamburger .line {
  position: absolute;
  display: block;
  left: 5px;
  height: 2px;
  background-color: white;
}
#page-header #hamburger .line:first-of-type {
  -webkit-transform: translateY(8px);
          transform: translateY(8px);
  width: 20px;
}
#page-header #hamburger .line:nth-of-type(2) {
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
  width: 18px;
}
#page-header #hamburger .line:last-of-type {
  -webkit-transform: translateY(22px);
          transform: translateY(22px);
  width: 16px;
}
#page-header #hamburger:active .line:first-of-type {
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}
#page-header #hamburger:active .line:last-of-type {
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

#sidebar-nav {
  position: absolute;
  z-index: 3;
  top: 0;
  height: 100vh;
  width: 400px;
  background-color: #efefef;
  box-shadow: 0 0 0 0 #3f3f3f;
  -webkit-transform: translateX(-400px);
          transform: translateX(-400px);
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
#sidebar-nav #sidebar-header {
  position: relative;
  height: 200px;
  width: 100%;
  background-color: #0a94ab;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/material-header.jpg");
  background-size: cover;
}
#sidebar-nav #sidebar-header #codepen-link {
  position: relative;
  display: block;
  top: 30px;
  left: 30px;
  height: 80px;
  width: 80px;
  z-index: 10;
  border-radius: 50%;
  box-sizing: border-box;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.6;
  transition: all 0.25s;
}
#sidebar-nav #sidebar-header #codepen-link:hover {
  opacity: 1;
  box-shadow: 0 2px 6px #0f0f0f;
}
#sidebar-nav #sidebar-header #profile-info {
  position: relative;
  top: 15px;
  padding: 30px;
}
#sidebar-nav #sidebar-header #profile-info #profile-name {
  font-size: 1.5em;
  margin-bottom: 5px;
}
#sidebar-nav #sidebar-header #btn-more {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px;
  cursor: pointer;
}
#sidebar-nav #sidebar-header #btn-more .dot {
  display: block;
  height: 4px;
  width: 4px;
  border-radius: 50%;
  margin-bottom: 5px;
  background-color: white;
}
#sidebar-nav #sidebar-nav-list {
  position: relative;
  background-color: #efefef;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item {
  position: relative;
  z-index: 4;
  box-shadow: 0 2px 4px transparent;
  opacity: 0;
  -webkit-transform: translateX(-30px);
          transform: translateX(-30px);
  transition: all 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  background-color: #efefef;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item a {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0 20px 30px;
  color: #3f3f3f;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item a .material-icons {
  padding: 0 8px 2px 0;
  color: #f55e22;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:hover {
  z-index: 5;
  background-color: white;
  box-shadow: 0 2px 4px #6f6f6f;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(1) {
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(3) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(4) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(5) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(6) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(7) {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
#sidebar-nav #sidebar-nav-list .sidebar-nav-item:nth-child(8) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#sidebar-nav:target {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  box-shadow: -4px 0 12px 6px #3f3f3f;
}
#sidebar-nav:target .sidebar-nav-item {
  -webkit-animation: nav-item-fade-in 1s ease-in-out;
          animation: nav-item-fade-in 1s ease-in-out;
}
#sidebar-nav:target + #nav-screen-overlay {
  display: block;
  pointer-events: auto;
  opacity: 0.3;
}

#nav-screen-overlay {
  position: fixed;
  z-index: 2;
  height: 100vh;
  width: 100vw;
  background-color: #0f0f0f;
  opacity: 0;
  cursor: default;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

@-webkit-keyframes nav-item-fade-in {
  to {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes nav-item-fade-in {
  to {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

<div id="background"></div>
<div id="fab">&#43;</div>
<header id="page-header"><a id="hamburger" href="#sidebar-nav" target="_self"><span class="line"></span><span class="line"></span><span class="line"></span></a></header>
<nav id="sidebar-nav">
  <header id="sidebar-header"><a id="codepen-link" href="https://www.codepen.io/seanfree" target="_blank"></a>
    <div id="profile-info">
      <h3 id="profile-name">Sean Free</h3>
      <h4 id="blurb">Rogue Webonaut</h4>
    </div><a id="btn-more"><span class="dot"></span><span class="dot"></span><span class="dot"></span></a>
    <ul id="sidebar-nav-list">
      <li class="sidebar-nav-item" id="nav-item-home"><a href="#"><i class="material-icons">home</i>Home</a></li>
      <li class="sidebar-nav-item" id="nav-item-social"><a href="#"><i class="material-icons">people</i>Social</a></li>
      <li class="sidebar-nav-item" id="nav-item-mail"><a href="#"><i class="material-icons">mail</i>Mail</a></li>
      <li class="sidebar-nav-item" id="nav-item-pictures"><a href="#"><i class="material-icons">photo_library</i>Pictures</a></li>
      <li class="sidebar-nav-item" id="nav-item-music"><a href="#"><i class="material-icons">library_music</i>Music</a></li>
      <li class="sidebar-nav-item" id="nav-item-files"><a href="#"><i class="material-icons">folder</i>Files</a></li>
      <li class="sidebar-nav-item" id="nav-item-settings"><a href="#"><i class="material-icons">settings</i>Settings</a></li>
      <li class="sidebar-nav-item" id="nav-item-close"><a href="#"><i class="material-icons">close</i>Close</a></li>
    </ul>
  </header>
</nav><a id="nav-screen-overlay" href="#" target="_self"></a>