Html 使纯css侧栏导航从右侧显示

我正在实现找到的边栏，但需要它从右侧滑入，我不知道如何反转x轴的方向

我认为可能有用的是

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

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

[代码笔]

完整代码：

HTML

html，正文{
宽度：100%；
颜色：白色；
字体系列：“Roboto”，无衬线；
}
：-moz选择{
背景：透明；
}
：：选择{
背景：透明；
}
a{
颜色：白色；
文字装饰：无；
}
#背景{
位置：固定；
z指数：0；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/hot-air-balloons.jpg");
背景尺寸：封面；
背景位置：中心；
不透明度：0.2；
}
#晶圆厂{
位置：固定；
z指数：1；
右：30px；
底部：30px；
高度：60px；
宽度：60px；
边界半径：50%；
背景色：#f55e22；
盒影：0 2px 8px#3f3f；
文本对齐：居中；
线高：60px；
字号：1.75em；
光标：指针；
}
#晶圆厂：活跃{
-webkit变换：比例（0.95）；
变换：比例（0.95）；
}
#页眉{
位置：固定；
z指数：1；
排名：0；
左：0；
高度：60px；
宽度：100vw；
背景色：#0a94ab；
盒影：0-3px 8px 5px#3f3f；
}
#页眉#汉堡包{
位置：相对位置；
显示：块；
顶部：15px；
左：15px；
高度：30px；
宽度：30px；
}
#页眉#汉堡包行{
位置：绝对位置；
显示：块；
左：5px；
高度：2倍；
背景色：白色；
}
#页眉#hamburger.行：类型的第一个{
-webkit转换：translateY（8px）；
变换：translateY（8px）；
宽度：20px；
}
#页眉#hamburger.行：第n个类型（2）{
-webkit转换：translateY（15px）；
转换：translateY（15px）；
宽度：18px；
}
#页眉#hamburger.行：类型的最后一行{
-webkit转换：translateY（22px）；
转换：translateY（22px）；
宽度：16px；
}
#页眉#hamburger:活动。行：类型的第一个{
-webkit转换：translateY（10px）；
变换：translateY（10px）；
}
#页眉#hamburger:活动。行：类型的最后一个{
-webkit转换：translateY（20px）；
变换：translateY（20px）；
}
#侧栏导航{
位置：绝对位置；
z指数：3；
排名：0；
高度：100vh；
宽度：400px；
背景色：#EFEF；
盒影：0#3f3f；
-webkit转换：translateX（-400px）；
转换：translateX（-400px）；
转换：-webkit转换0.5s轻松输入输出；
过渡：0.5s缓进缓出转换；
转换：转换0.5s轻松输入输出，-webkit转换0.5s轻松输入输出；
}
#侧栏导航#侧栏标题{
位置：相对位置；
高度：200px；
宽度：100%；
背景色：#0a94ab；
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/material-header.jpg");
背景尺寸：封面；
}
#侧栏导航#侧栏标题#代码打开链接{
位置：相对位置；
显示：块；
顶部：30px；
左：30px；
高度：80px；
宽度：80px；
z指数：10；
边界半径：50%；
框大小：边框框；
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
背景位置：中心；
背景尺寸：封面；
不透明度：0.6；
过渡：均为0.25秒；
}
#侧栏导航#侧栏标题#代码打开链接：悬停{
不透明度：1；
盒影：0 2px 6px#0 0f0f；
}
#侧栏导航#侧栏标题#配置文件信息{
位置：相对位置；
顶部：15px；
填充：30px；
}
#侧栏导航#侧栏标题#配置文件信息#配置文件名称{
字号：1.5em；
边缘底部：5px；
}
#侧栏导航#侧栏标题#btn更多{
位置：绝对位置；
顶部：20px；
右：20px；
填充物：5px；
光标：指针；
}
#侧边栏导航#侧边栏标题#btn更多.dot{
显示：块；
高度：4px；
宽度：4px；
边界半径：50%；
边缘底部：5px；
背景色：白色；
}
#侧栏导航#侧栏导航列表{
位置：相对位置；
背景色：#EFEF；
}
#侧栏导航#侧栏导航列表。侧栏导航项{
位置：相对位置；
z指数：4；
盒影：0 2px 4px透明；
不透明度：0；
-webkit转换：translateX（-30px）；
转换：translateX（-30px）；
过渡：所有0.25秒缓进缓出；
-webkit动画填充模式：正向；
动画填充模式：正向；
背景色：#EFEF；
}
#侧栏导航#侧栏导航列表。侧栏导航项目a{
显示器：flex；
对齐项目：居中；
身高：100%；
宽度：100%；
框大小：边框框；
填充：20px 0 20px 30px；
颜色：#3f3f；
}
#侧栏导航#侧栏导航列表。侧栏导航项目a。材质图标{
填充：0 8px 2px 0；
颜色：#f55e22；
}
#侧栏导航#侧栏导航列表。侧栏导航项：悬停{
z指数：5；
背景色：白色；
盒影：0 2px 4px#6f6f；
}
#侧栏导航#侧栏导航列表。侧栏导航项：第n个子项（1）{
-webkit动画延迟：0.05秒；
动画延迟：0.05秒；
}
#侧栏导航#侧栏导航列表。侧栏导航项：第n个子项（2）{
-webkit动画延迟：0.1s；
动画延迟：0.1s；
}
#侧栏导航#侧栏导航列表。侧栏导航项：第n个子项（3）{
-webkit动画延迟：0.15s；
动画延迟：0.15s；
}
#侧栏导航#侧栏导航列表。侧栏导航项：第n个子项（4）{
-webkit动画延迟：0.2s；
动画延迟：0.2s；
}
#侧栏导航#侧栏导航列表。侧栏导航项：第n个子项（5）{
-webkit动画延迟：0.25s；
动画延迟：0.25s；
}
#侧栏导航#侧栏导航列表。侧栏导航项：第n个子项（6）{
-webkit动画延迟：0.3s；
动画延迟：0.3s；
}
#侧栏导航#侧栏导航列表。侧栏导航项：第n个子项（7）{
-webkit动画延迟：0.35s；
动画延迟：0.35s；
}
#侧栏导航#侧栏导航列表。侧栏导航项：第n个子项（8）{
-webkit动画延迟：0.4s；
动画延迟：0.4s；
}
#侧栏导航：目标{
-webkit转换：