Css 网格布局中带有旋转3D动画的侧栏

我试图在网格布局上构建一个侧栏菜单。问题是，当菜单关闭时，主部分没有填满它的空间

我也尝试过flexbox布局，但失败了。这是我的密码

编辑：正如Paulie_D在评论中解释的那样，我将完整的代码添加到代码片段中。我想在问这个问题的时候贴在这里太多了

const hamburger=document.querySelector（'.hamburger'）；
const section=document.querySelector（'.section'）；
const sidebar=document.querySelector（'.sidebar'）；
hamburger.addEventListener（'click'，openSidebar）；
函数openSidebar（e）{
//切换活动汉堡类
this.classList.toggle（'is-active'）；
//检查侧边栏是否打开，并据此调整左侧边距
if（sidebar.classList.contains（'is-open'））{
截面样式['margin-left']='calc（100vw/12*-3）'；
}否则{
section.style['margin-left']='0px'；
}
//切换侧栏打开类
边栏.classList.toggle（'is-open'）；
}

*，*：：之前，*：：之后{
保证金：0；
}
身体{
显示：网格；
网格模板列：重复（12，1fr）；
-webkit透视图：1000px；
透视图：1000px；
-webkit透视图原点：左；
透视原点：左；
}
.侧边栏{
网格柱：1/4；
背景：#1d1f21；
颜色：#FFF；
最小高度：100vh；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
-webkit变换原点：左；
变换原点：左；
过渡：所有400ms缓进缓出；
}
.科{
网格柱：4/-1；
过渡：所有400ms缓进缓出；
/*侧边栏采用3fr，因此此计算使侧边栏在较低宽度下看起来不太好，但可以添加媒体查询*/
左边距：计算值（100vw/12*-3）；
}
.内容{
填料：2米；
}
.头衔{
填充：1em；
边框底部：2个实心35393c；
}
.菜单{
列表样式类型：无；
左侧填充：0；
}
.菜单项{
位置：相对位置；
-webkit透视图：1000px；
透视图：1000px；
-webkit透视图来源：右；
透视原点：右；
}
.菜单链接{
文字装饰：无；
颜色：#FFF；
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：2em 0；
过渡：背景300ms；
}
.菜单链接：悬停{
背景：35393c；
}
.盒子{
背景：#33FF00；
位置：绝对位置；
排名：0；
底部：0；
右图：-100%；
左：100%；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
-webkit变换原点：左；
变换原点：左；
过渡：所有400ms立方贝塞尔（0,0.46,0.32,1.23）；
}
.box:悬停{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.菜单链接：悬停~.框{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.汉堡包{
显示：块；
背景:#33CC99；
位置：相对位置；
高度：50px；
宽度：50px；
过渡：所有200ms的缓进缓出；
/*跨端*/
}
.汉堡包{
位置：绝对位置；
背景：#1d1f21；
显示：块；
高度：3倍；
左：5px；
右：5px；
过渡：所有200ms的缓进缓出；
}
.汉堡包跨度：第一种{
顶部：12px；
}
.汉堡包跨度：第n个孩子（2）{
顶部：24px；
}
.汉堡包跨度：最后一种类型{
底部：12px；
}
.汉堡包：悬停{
背景：5cd6ad；
光标：指针；
}
.是有效跨度{
背景：35393c；
}
.是活动范围：第一个孩子{
-webkit变换：旋转（45度）；
变换：旋转（45度）；
顶部：24px；
}
.是活动范围：第n个子项（2）{
左：100%；
右：0；
}
.是活动的span:最后一个子项{
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
底部：24px；
}
.营业{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}

内容


内容


内容


内容


以下是内容

我的同僚们都是精英。在类似的情况下，在自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活、自由的生活

您可以使用

左边距

偏移量。如果事先不知道宽度，则需要javascript

函数切换（）{
设边栏=document.querySelector（“#边栏”）；
侧栏.classList.toggle（“打开”）
}

放在一边{
背景颜色：蓝色；
高度：100vh；
宽度：200px；
左：0；
过渡：所有1；
//显示：内联块；
浮动：左；
}
.身体{
//显示：内联块；
背景颜色：橙色；
}
.open{
左边距：-200px；
}
html，正文{
填充：0；
保证金：0；
}

边栏
切换


其他一些文本

因为您正在应用转换（这是一种简单的视觉效果），所以寻求代码帮助的问题必须包含在问题本身中重现所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。瞧，谢谢你，保利，我编辑了我希望这会更好。