我一直在进行一项实验，我使用小灰度高度图并使用来自<div>元素和CSS转换的多维数据集将其转换为3D地形。
可以在此codepen和更多详细信息here上看到结果。或者在这里的片段中：
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
color: #fff;
}
#terrain-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
perspective: 820px;
}
#terrain {
position: absolute;
left: 50%;
top: 50%;
width: 10em;
height: 10em;
margin-left: -5em;
margin-top: -5em;
transform: rotateX(80deg) rotateZ(170deg);
font-size: 3em;
transform-style: preserve-3d;
border: solid 2px grey;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateX(70deg) rotateZ(0deg);
}
100% {
transform: rotateX(70deg) rotateZ(359deg);
}
}
.cube {
position: absolute;
width: 1em;
height: 1em;
transform-style: preserve-3d;
backface-visibility: hidden;
border: solid 1px #fff;
}
.side {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.top {
background: green;
}
.front {
background: yellow;
transform-origin: 50% 100% 0;
transform: rotateX(90deg) rotateY(180deg);
}
.right {
background: red;
transform-origin: 100% 50% 0;
transform: rotateY(-90deg) rotateX(180deg);
}
.left {
background: blue;
transform-origin: 0 50% 0;
transform: rotateY(90deg) rotateX(180deg);
}
.back {
background: brown;
transform-origin: 50% 0 0;
transform: rotateX(-90deg) rotateY(180deg);
}<html>
<body>
<div id="terrain-view">
<div id="terrain">
<div class="cube" style="left: 0em; top: 0em; transform: translateZ(0.09em) scaleZ(0.09);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 0em; transform: translateZ(0.28em) scaleZ(0.28);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 0em; transform: translateZ(0.5em) scaleZ(0.5);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 0em; transform: translateZ(0.87em) scaleZ(0.87);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 0em; transform: translateZ(1em) scaleZ(1);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 0em; transform: translateZ(1em) scaleZ(1);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 0em; transform: translateZ(0.87em) scaleZ(0.87);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 0em; transform: translateZ(0.5em) scaleZ(0.5);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 0em; transform: translateZ(0.28em) scaleZ(0.28);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 0em; transform: translateZ(0.09em) scaleZ(0.09);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 1em; transform: translateZ(0.28em) scaleZ(0.28);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 1em; transform: translateZ(0.73em) scaleZ(0.73);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 1em; transform: translateZ(1.12em) scaleZ(1.12);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 1em; transform: translateZ(1.62em) scaleZ(1.62);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 1em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 1em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 1em; transform: translateZ(1.62em) scaleZ(1.62);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 1em; transform: translateZ(1.12em) scaleZ(1.12);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 1em; transform: translateZ(0.73em) scaleZ(0.73);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 1em; transform: translateZ(0.28em) scaleZ(0.28);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 2em; transform: translateZ(0.5em) scaleZ(0.5);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 2em; transform: translateZ(1.12em) scaleZ(1.12);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 2em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 2em; transform: translateZ(2.26em) scaleZ(2.26);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 2em; transform: translateZ(2.39em) scaleZ(2.39);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 2em; transform: translateZ(2.39em) scaleZ(2.39);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 2em; transform: translateZ(2.26em) scaleZ(2.26);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 2em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 2em; transform: translateZ(1.12em) scaleZ(1.12);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 2em; transform: translateZ(0.5em) scaleZ(0.5);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 3em; transform: translateZ(0.87em) scaleZ(0.87);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 3em; transform: translateZ(1.62em) scaleZ(1.62);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 3em; transform: translateZ(2.26em) scaleZ(2.26);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 3em; transform: translateZ(2.52em) scaleZ(2.52);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 3em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 3em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 3em; transform: translateZ(2.52em) scaleZ(2.52);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 3em; transform: translateZ(2.26em) scaleZ(2.26);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 3em; transform: translateZ(1.62em) scaleZ(1.62);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 3em; transform: translateZ(0.87em) scaleZ(0.87);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 4em; transform: translateZ(1em) scaleZ(1);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 4em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 4em; transform: translateZ(2.39em) scaleZ(2.39);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 4em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 4em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 4em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 4em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 4em; transform: translateZ(2.39em) scaleZ(2.39);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 4em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 4em; transform: translateZ(1em) scaleZ(1);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 5em; transform: translateZ(1em) scaleZ(1);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 5em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 5em; transform: translateZ(2.39em) scaleZ(2.39);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 5em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 5em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 5em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 5em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 5em; transform: translateZ(2.39em) scaleZ(2.39);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 5em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 5em; transform: translateZ(1em) scaleZ(1);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 6em; transform: translateZ(0.87em) scaleZ(0.87);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 6em; transform: translateZ(1.62em) scaleZ(1.62);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 6em; transform: translateZ(2.26em) scaleZ(2.26);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 6em; transform: translateZ(2.52em) scaleZ(2.52);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 6em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 6em; transform: translateZ(2.55em) scaleZ(2.55);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 6em; transform: translateZ(2.52em) scaleZ(2.52);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 6em; transform: translateZ(2.26em) scaleZ(2.26);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 6em; transform: translateZ(1.62em) scaleZ(1.62);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 6em; transform: translateZ(0.87em) scaleZ(0.87);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 7em; transform: translateZ(0.5em) scaleZ(0.5);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 7em; transform: translateZ(1.12em) scaleZ(1.12);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 7em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 7em; transform: translateZ(2.26em) scaleZ(2.26);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 7em; transform: translateZ(2.39em) scaleZ(2.39);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 7em; transform: translateZ(2.39em) scaleZ(2.39);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 7em; transform: translateZ(2.26em) scaleZ(2.26);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 7em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 7em; transform: translateZ(1.12em) scaleZ(1.12);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 7em; transform: translateZ(0.5em) scaleZ(0.5);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 8em; transform: translateZ(0.28em) scaleZ(0.28);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 8em; transform: translateZ(0.73em) scaleZ(0.73);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 8em; transform: translateZ(1.12em) scaleZ(1.12);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 8em; transform: translateZ(1.62em) scaleZ(1.62);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 8em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 8em; transform: translateZ(1.77em) scaleZ(1.77);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 8em; transform: translateZ(1.62em) scaleZ(1.62);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 8em; transform: translateZ(1.12em) scaleZ(1.12);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 8em; transform: translateZ(0.73em) scaleZ(0.73);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 8em; transform: translateZ(0.28em) scaleZ(0.28);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 0em; top: 9em; transform: translateZ(0.09em) scaleZ(0.09);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 1em; top: 9em; transform: translateZ(0.28em) scaleZ(0.28);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 2em; top: 9em; transform: translateZ(0.5em) scaleZ(0.5);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 3em; top: 9em; transform: translateZ(0.87em) scaleZ(0.87);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 4em; top: 9em; transform: translateZ(1em) scaleZ(1);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 5em; top: 9em; transform: translateZ(1em) scaleZ(1);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 6em; top: 9em; transform: translateZ(0.87em) scaleZ(0.87);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 7em; top: 9em; transform: translateZ(0.5em) scaleZ(0.5);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 8em; top: 9em; transform: translateZ(0.28em) scaleZ(0.28);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div><div class="cube" style="left: 9em; top: 9em; transform: translateZ(0.09em) scaleZ(0.09);"><div class="side top"></div><div class="side front"></div><div class="side left"></div><div class="side right"></div><div class="side back"></div></div> </div>
</div>
</body>
</html>
在Chrome上一切正常。但是，在Firefox上，只要我有超过16个立方体（或80个div，因为每个立方体由5个div组成），元素的Z顺序就会中断。
您可以在Firefox上转换的元素数量是否有限制？或者，我在Firefox的CSS中省略了哪些重要内容？
作为一个侧面问题，在Firefox（但不是Chrome）上，让两个div共享相同的3D空间（即触摸）也会破坏Z顺序并导致闪烁。似乎唯一的办法是在div之间引入间距，但这意味着我必须在多维数据集之间添加间距，这很难看。