无论分辨率如何，有什么方法可以在顶部和底部之间排列 TRON Legacy-style 网格 half-way 的末端？

Question

预期行为、问题和屏幕截图

在 1920x1080（100% 比例）和 3840x2160（200% 比例）下，网格的末端与天空的 horizon 很好地对齐。

上面的屏幕截图是我认为的预期行为。下面截图不是。

现在是屏幕截图，但这次是全屏显示。请注意网格的末端与天空的 horizon.

不对齐

备注

为了让它看起来像一个网页，我添加了电影 TRON：Legacy 中的一些文字，但修改了文字以使其成为我自己的。以 3840x2160 拍摄的图像已降低为 1920x1080 以节省一些带宽。

代码

html,
body,
.container {
  height: 100%;
  margin: 0;
  box-sizing: content-box;
}

body {
  background: #87CEEB linear-gradient(to bottom, #408aa5, #7cc3e0 43.75%, #bce9ff 50%, #327e99 62.5%, #01617b);
  color: white;
}

.grid {
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 900px;
  opacity: 0.75;
  transform-origin: bottom center;
  /*
     * Specifying a percentage for perspective() won't work because the
     * grid will be in 2D instead of 3D.
     */
  transform: perspective(1000px) rotateX(60.5deg) scale(8) translateZ(0);
  backface-visibility: hidden;
  /* 
     * Clip the extended "after" pseudo element in order to give it an illusion of a moving
     * grid.
     */
  overflow: hidden;
}


/* Add a gradient that fades to the horizon. */

.grid:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(to top, transparent, transparent 75%, rgba(240, 248, 255, 0.875));
  z-index: -1;
}


/* The grid. */

.grid:after {
  content: "";
  position: absolute;
  top: -900px;
  left: 0;
  right: 0;
  z-index: -2;
  background: rgba(0, 0, 0, 0.75) url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='180' height='180' rx='20' stroke='white' stroke-width='5' fill='none' /%3E%3C/svg%3E") repeat;
  background-size: 3.125%;
  transform: translateZ(0);
  width: 100%;
  height: 1800px;
  animation: slidegrid 12s forwards linear infinite;
}

@keyframes slidegrid {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50%);
  }
}

.container {
  margin: auto;
  width: 75%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  z-index: 1;
  position: relative;
}

.maintitle {
  margin-top: 0;
}

@media screen and (max-width: 960px) {
  .container {
    margin: 0;
    width: 100%;
  }
}

<div class="grid"></div>
<div class="container">
  <h1 class="maintitle">The Grid</h1>
  <p>A digital frontier.</p>
  <p>I tried to picture clusters of information as they moved through the computer.</p>
  <p>What do they look like?</p>
  <p>Trains? Bicycles?</p>
  <p>Were the circuits like lightrails?</p>
  <p>I kept dreaming of a world I thought I'd never seen.</p>
  <p>And then, one day...</p>
  <p style="font-size: 2em; text-align: center;"><strong>I got in!</strong></p>
</div>

尝试上面的代码并调整浏览器的高度 window。请注意，网格保持不变并且不与 horizon.

对齐

带有“网格”的元素 class 被设置为 3D space。我伪造了网格背景，让它看起来像是从天空反射出来的。带有“容器”class 的元素是我认为容器是“see-through 屏幕”或“全息网页”的元素，除非视口变窄。另外，请注意“容器”class 的位置是相对的，z-index 设置为 1。网格 (SVG) 以及渐变到 horizon 的渐变显示在前面容器而不是后面。

（是的，我在 HTML 中打错了“我从未见过”，但我决定暂时保留屏幕截图。）

总结

我想创建一种背景错觉，使它看起来像是 3D 并将网格的末端与视口高度的 50% 对齐。我怎样才能使网格的末端接触到 horizon?

Answer 1

如果滑动背景图应该放在下半部分，你可以把它放在那里，然后从它自己的顶部设置transform-origin

示例：

html,
body,
.container {
  height: 100%;
  margin: 0;
  box-sizing: content-box;
}
body {
  background: #87ceeb
    linear-gradient(
      to bottom,
      #408aa5,
      #7cc3e0 43.75%,
      #bce9ff 50%,
      #327e99 62.5%,
      #01617b
    ) fixed;
  color: white;
}

.grid {
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  top: 50vh;
  height: 100vh;
  opacity: 0.75;
  transform-origin: center top;
  /*
     * Specifying a percentage for perspective() won't work because the
     * grid will be in 2D instead of 3D.
     */
  transform: perspective(200px) rotateX(60.5deg) scale(1.5, 0.5) translateZ(0);
  backface-visibility: hidden;
  /* 
     * Clip the extended "after" pseudo element in order to give it an illusion of a moving
     * grid.
     */
  overflow: hidden;
}
/* Add a gradient that fades to the horizon. */
.grid:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    to top,
    transparent,
    transparent 75%,
    rgba(240, 248, 255, 0.875)
  );
  z-index: -1;
}
/* The grid. */
.grid:after {
  content: "";
  position: absolute;
  top: -900px;
  left: 0;
  right: 0;
  z-index: -2;
  background: rgba(0, 0, 0, 0.75)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='180' height='180' rx='20' stroke='white' stroke-width='5' fill='none' /%3E%3C/svg%3E")
    repeat;
  background-size: 3.125%;
  transform: translateZ(0);
  width: 100%;
  height: 1800px;
  animation: slidegrid 12s forwards linear infinite;
}

@keyframes slidegrid {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50%);
  }
}

.container {
  margin: auto;
  width: 75%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  z-index: 1;
  position: relative;
}

.maintitle {
  margin-top: 0;
}

@media screen and (max-width: 960px) {
  .container {
    margin: 0;
    width: 100%;
  }
}

  <div class="grid"></div>
  <div class="container">
    <h1 class="maintitle">The Grid</h1>
    <p>A digital frontier.</p>
    <p>I tried to picture clusters of information as they moved through the computer.</p>
    <p>What do they look like?</p>
    <p>Trains? Bicycles?</p>
    <p>Were the circuits like lightrails?</p>
    <p>I kept dreaming of a world I thought I'd never seen.</p>
    <p>And then, one day...</p>
    <p style="font-size: 2em; text-align: center;"><strong>I got in!</strong></p>
  </div>

无论分辨率如何，有什么方法可以在顶部和底部之间排列 TRON Legacy-style 网格 half-way 的末端？

Any way to line up the end of TRON Legacy-style grid half-way between top and bottom regardless of resolution?

html

css

3d

预期行为、问题和屏幕截图

备注

代码

总结