Javascript CSS透视图：在容器边界内拟合梯形

我有一个片段，它使用CSS将一整页

元素放入45度透视图中。但是，转换后的画布超出了页面的边界并被剪裁：

window.onload=window.onresize=function（）{
//在画布上绘制渐变
var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctx=canvas.getContext（'2d'）；
var grad=ctx.createLinearGradient（0,0,0，canvas.height）；
渐变加色停止（0，#ff0000'）；
渐变加色停止（0.5，#ffff00'）；
渐变加色停止（1，#00ff00'）；
ctx.fillStyle=梯度；
ctx.fillRect（0，0，canvas.width，canvas.height）；
};
正文{
保证金：0；
溢出：隐藏；
}
帆布{
变换样式：保留-3d；
变换：旋转（45度）；
}
.集装箱{
宽度：100%；
身高：100%；
前景：50vw；
透视来源：50%0%；
}
使用
translateZ

在CSS中查找注释


window.onload=window.onresize=function（）{
//在画布上绘制渐变
var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctx=canvas.getContext（'2d'）；
var grad=ctx.createLinearGradient（0,0,0，canvas.height）；
渐变加色停止（0，#ff0000'）；
渐变加色停止（0.5，#ffff00'）；
渐变加色停止（1，#00ff00'）；
ctx.fillStyle=梯度；
ctx.fillRect（0，0，canvas.width，canvas.height）；
};
正文{
保证金：0；
溢出：隐藏；
}
帆布{
变换样式：保留-3d；
/*这里增加了翻译*/
变换：translateZ（-50vmax）rotateX（45度）；
}
.集装箱{
宽度：100%；
身高：100%；
前景：50vw；
透视来源：50%0%；
}

此解决方案不适用于所有页面大小。尝试单击代码段上的“完整页面”，或者在上面运行它。这只是一种技巧。。值可以是百分比或视口单位。。并且可以通过媒体查询进行更改