转换div后对齐div的方法？

Question

我有一堆<div>作为概述窗口的图块，供用户选择。它们需要保持一致，彼此之间要保持一定的差距。

我已经尝试了以下方法来实现此目的：

1]在其公共父级上设置perspective值，然后使用transform: translateZ使它们看起来更小并向后发送。仅将选择的div转换回0并显示为正常大小，其余部分保持转换状态。

问题：转换后无法自动对齐。

2）将其公共父级的display值设置为flex，从而对齐所有div。所选的div将缩放为更大的尺寸。

问题：看起来不是3d。视觉上很丑陋，无助于认知负荷。

我仍然更喜欢1）方法，但是在转换它们之后如何对齐这些div？

div#container {
  perspective: 200px;
  position: relative;
}
div.window {
  transform: translateZ(-150px);
  position: absolute;
}
div#window-1 {
  left: 10px;
}
div#window-2 {
  left: 110px;
}

<div id="container">
  <div id="window-1" class="window">test</div>
  <div id="window-2" class="window">test2</div>
  <div id="window-3" class="window">test3</div>
  <div id="window-4" class="window">test4</div>
  <div id="window-5" class="window">test5</div>
</div>

Answer 1

您实际上并不需要3D效果。使用flexbox布局可以轻松地布局和定位子元素，而简单的transform: scale(...)将会带来很多不同，而无需使用任何JS。添加一些令人眼花get乱的糖果，您将获得类似代码片段的内容（确实需要整页显示）。

UPDATE无论如何，我选择“ flexbox”的动机是您实际上很少给出任何代码。另外，虽然我个人拥有快速的PC，快速的GPU和200-500Mbit的玻璃纤维连接，但对于其他许多人而言却并非如此。创建CPU / GPU密集的网页最终可能会咬你的尾巴，因为它们往往会变得缓慢，抖动或完全缓慢（更不用说了，过于复杂）。

我倾向于从A到B的最短路径，紧凑的代码，只需要最少的代码（并且与IE11兼容。如果它在IE11上运行，则可以在任何地方运行。

因此，请以这个答案为起点，并调整基本机制以满足您的需求，并同样修改眼糖果。您随时可以在需要时使用JS。

UPDATE 2

修改了代码，现在结合了3D布局和一些3D悬停效果。父母和孩子都是Flexbox容器，因此您可以在其中执行任何FBL操作。 3D布局仍然保留。

专业提示

由于3D效果，子元素可能会出现锯齿状（非锯齿）的边缘。如果是这样，请尝试向子元素添加透明轮廓，例如.container>* { ... outline: 1px solid transparent ... }。这以某种方式迫使边缘抗锯齿。当心：常规轮廓将不可见，“视障者”可能不会被逗乐...

.container {

    /* UPDATE: 3D definitions */
    position: relative; /* create stacking context */

    transform: perspective(400px) rotateX(20deg); /* Starwars */
    perspective-origin: center center; /* center looks most straight */
    transform-style: preserve-3d; /* Kids must maintain 3D look */

    display: flex;   /* default Flexbox layout: row of columns */
    flex-wrap: wrap; /* wrap to next line when no more space   */

    width  : 50%;    /* some preferred with */
    padding: 1rem;   /* inner spacing */
    margin : 0 auto; /* center container horizontally */
    cursor : default;
}

/* UPDATE 3D hover preps */
.container:hover>* {
    perspective: 500px; /* higher value means a `more straight view` */
    /* try 200px and 2000px */

    transition: all 100ms ease-in; /* some delay prevents element jitter/flicker */
    /* too slow for IE11 (can see swap from z-index 1 to z-index 2) */
}

.container>* { /* or .container>.window, but this is more generic */
    /* UPDATE needs z positioning */
    z-index: 1;

    display: flex;           /* ditto */
    justify-content: center; /* fbl center content in window */
    align-items: center;

    min-width : 5rem;  /* some preferred size, square */
    min-height: 5rem;
    margin    : .5rem; /* outer spacing */

    /* eye-candy */
    background-color: white;

    border: 1px solid rgba(0,0,0,.1);

    border-radius: 3px;

    box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
                0px 1px 1px  0px rgba(0,0,0,.14),
                0px 1px 3px  0px rgba(0,0,0,.12);   /* GMC elevation 1dp */

}
.container>:hover {
    /* UPDATE added 3D transitions */
    z-index: 2;

    transform: scale(1.2) rotateX(-20deg) translateZ(50px);

    /* eye-candy */
    background-color: CornflowerBlue;

    box-shadow: 0px 3px  5px -1px rgba(0,0,0,.2),
                0px 5px  8px  0px rgba(0,0,0,.14),
                0px 1px 14px  0px rgba(0,0,0,.12);  /* GMC elevation 5dp */
}

/* back to normal size when 'click and hold' */
.container>:active { transform: scale(1) }

<div class="container">
  <div>test1</div>
  <div>test2</div>
  <div>test3</div>
  <div>test4</div>
  <div>test5</div>
  <div>test6</div>
  <div>test7</div>
  <div>test8</div>
  <div>test9</div>
  <div>test10</div>
  <div>test11</div>
  <div>test12</div>
  <div>test13</div>
  <div>test14</div>
  <div>test15</div>
  <div>test16</div>
  <div>test17</div>
  <div>test18</div>
  <div>test19</div>
  <div>test20</div>
  <div>test21</div>
  <div>test22</div>
  <div>test23</div>
  <div>test24</div>
  <div>test25</div>
  <div>test26</div>
  <div>test27</div>
  <div>test28</div>
</div>