Question

我使用CSS3，HTML5和Javascript创建了一个3d场景（一个迷宫）。我想根据屏幕尺寸自动调整风景大小，因此它适合不同大小的屏幕。最好的方法是什么？有没有办法自动调整风景/屏幕的大小？

如果没有自动方式，那么我有这个问题： “在相机前面”有一个尺寸为WxH的DIV，我使用translate3d（X，Y，Z）定位，带有透视P. 如何在屏幕上以像素为单位计算此DIV的实际大小？

BTW - 我正在使用Chrome

Answer 1

＃1 - 如果要缩放它，请使用scale3d向上或向下缩放整个内容。测量屏幕大小并按您需要的比例缩放div（例如，如果你有一个800x800 div，屏幕是1600x1200，缩放2倍）

＃2 - getBoundingClientRect（）

Answer 2

以下代码可以解决问题。考虑到最初设计场景的窗口大小（1920 * 965），此代码获取父容器的当前大小，并相对于原始1920 * 965缩放包含场景的Div。注意 - 它不会尝试对场景内的元素执行3D缩放，而是缩放包含整个场景的div，而内部的内容会自动调整大小。

另请注意，缩放父容器会使场景远离屏幕中心，代码如何使用负坐标将场景位置移动到Left和Top，以便将Div放置在正确的位置。

function resizeWin() {
        wW = ourDiv.parentNode.offsetWidth;
        wH = ourDiv.parentNode.offsetHeight;
        var scaler=Math.min(wW/1920, wH/965); // original screen was designed in full HD Chrome
        var w=wW/scaler;
        var h=wH/scaler;
        var left=(w-scaler*w)/2;
        var top=(h-scaler*h)/2;


        var style = "width:"+w+"px; height:"+h+"px;"+allStyles("-webkit-transform:  translate(-"+left+"px,-"+top+"px) scale("+scaler+");");

        ourDiv.setAttribute("style", style);
        redrawScene();
    }

自动调整3D CSS3风景大小 - 计算3D DIV的像素大小？

2 个答案: