Javascript 用天平缩小屏幕

我试图创造一个特殊的效果，但我被卡住了。基本上，当用户单击

nav

（在下面的代码片段中，我已经做了，所以您只需单击主体）时，应该会发生什么：

主屏幕缩小

从左侧滑入非画布菜单

此时会出现半透明覆盖

我的问题是规模效应。我试图达到的效果是，当窗口缩小时，你可以看到整个窗口，只是一个缩影。我能得到的最接近的是片段，窗口缩小了，但它仍然可以完全滚动，而不是按比例缩小窗口以成为一个微型版本

按照我现在的方式，您仍然可以滚动整个页面，但是我将使用

e.preventDefault

来处理这个问题，但是我想先让屏幕按顺序缩小

有人能帮忙吗

$（文档）.ready（函数（）{
var pageContainer=$（'.page container'）；
var offCanvas=$（“.offCanvas”）；
pageContainer.click（函数（）{
offCanvas.toggleClass（'menuActive'）
pageContainer.toggleClass（'pc-active'）；
});
});
*{
填充：0；
保证金：0；
}
.帆布外{
位置：绝对位置；
左：0；
排名：0；
高度：100vh；
宽度：300px；
背景颜色：蓝色；
过渡：全部。3秒轻松；
变换：translate3d（-300px，0，0）；
z指数：10；
}
menuActive先生{
变换：translate3d（0,0,0）；
}
.页面容器{
边框：4px实心；
身高：100%；
宽度：100%；
最小高度：1200px；
背景色：#ccc；
变换：scale3d（1,1,1）；
过渡：全部。4s轻松；
}
.pc激活{
变换：缩放3d（.9、.9、.1）
}
您可以在
vw/vh
单元中设置
宽度/高度
，以根据窗口调整其大小

请参阅代码片段：


$（文档）.ready（函数（）{
var pageContainer=$（'.page container'）；
var offCanvas=$（“.offCanvas”）；
pageContainer.click（函数（）{
offCanvas.toggleClass（'menuActive'）
pageContainer.toggleClass（'pc-active'）；
});
});
*{
填充：0；
保证金：0；
}
.帆布外{
位置：绝对位置；
左：0；
排名：0；
高度：100vh；
宽度：300px；
背景颜色：蓝色；
过渡：全部。3秒轻松；
变换：translate3d（-300px，0，0）；
z指数：10；
}
menuActive先生{
变换：translate3d（0,0,0）；
}
.页面容器{
边框：4px实心；
身高：100%；
宽度：100%；
最小高度：1200px；
背景色：#ccc；
变换：scale3d（1,1,1）；
过渡：全部。4s轻松；
}
.pc激活{
宽度：90vw；
高度：90vh；
最小高度：90vh；
}
您可以使用
左边距
将缩影移动到侧导航栏的
偏移位置
切换，并通过将
变换原点设置为左上方
将其缩放到所需值


$（文档）.ready（函数（）{
var pageContainer=$（'.page container'）；
var offCanvas=$（“.offCanvas”）；
pageContainer.click（函数（）{
offCanvas.toggleClass（'menuActive'）
pageContainer.toggleClass（'pc-active'）；
});
});
*{
填充：0；
保证金：0；
}
.帆布外{
位置：绝对位置；
左：0；
排名：0；
高度：100vh；
宽度：300px；
背景颜色：蓝色；
过渡：全部。3秒轻松；
变换：translate3d（-300px，0，0）；
z指数：10；
}
menuActive先生{
变换：translate3d（0,0,0）；
}
.页面容器{
边框：4px实心；
身高：100%；
宽度：100%；
最小高度：1200px；
背景色：#ccc；
变换：scale3d（1,1,1）；
过渡：全部。4s轻松；
文本对齐：居中；
}
.pc激活{
左边距：310px；
变换原点：左上；
最小高度：90vh；
变换：比例（0.4,0.4）；
}

页面内容
随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料随机材料
非常感谢您！我可以问一个后续问题吗？是否值得玩弄透视图来帮助缩小，还是vh/vw可以解决这个问题？vh/wh用于根据窗口的宽度和高度设置宽度和高度，因此它不考虑透视图。检查我的解决方案：）