CSS透视图:在容器边界内适应梯形
CSS透视图:在容器边界内适应梯形
提问于 2018-08-12 01:37:43
我有这个代码片段，它使用CSS将整个页面的<canvas>元素放入45度透视图中。但是，转换后的画布超出了页面的界限并被裁剪：
window.onload = window.onresize = function() {
// draw a gradient on the canvas
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);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(0.5, '#ffff00');
grad.addColorStop(1, '#00ff00');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};body {
margin: 0;
overflow: hidden;
}
canvas {
transform-style: preserve-3d;
transform: rotateX(45deg);
}
.container {
width: 100%;
height: 100%;
perspective: 50vw;
perspective-origin: 50% 0%;
}<div class="container">
<canvas></canvas>
</div>
我如何确保整个画布保持在页面的边界内(梯形的底部应该与页面具有完全相同的宽度)，同时保持透视效果？CSS或JavaScript解决方案都可以，只要它们适用于任何页面大小。
回答 1
Stack Overflow用户
发布于 2018-08-12 01:41:25
使用translateZ将其反向转换
在CSS中查找注释
window.onload = window.onresize = function() {
// draw a gradient on the canvas
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);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(0.5, '#ffff00');
grad.addColorStop(1, '#00ff00');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};body {
margin: 0;
overflow: hidden;
}
canvas {
transform-style: preserve-3d;
/* added translation here */
transform: translateZ(-50vmax) rotateX(45deg);
}
.container {
width: 100%;
height: 100%;
perspective: 50vw;
perspective-origin: 50% 0%;
}<div class="container">
<canvas></canvas>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51802195
复制相关文章
相似问题
腾讯云开发者
