Q:

Methods to align divs after transforming them?

I have a bunch of <div>s serving as tiles of overview windows for the users to choose from. They need to be aligned and remain certain gap in between each other.
I've tried the following methods to achieve this purpose:
1) set a perspective value on their common parent, and then use transform: translateZ to make them look smaller and send them backwards. Only selected div will be translated back to 0 and looks in normal size, with the rest staying transformed.
problem: can't automatically align after transforming.
2) set the display value of their common parent to flex, thus align all the divs. The selected div will scale to bigger size.
problem: doesn't look 3d. visually ugly and doesn't help with cognitive load.
I still prefer the 1) method, but how can I align those divs after transforming them?

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>

A:

You don't really need to go 3D to get some nice effect. Using flexbox layout for easy layout and positioning of child elements and a simple transform: scale(...) will make a lot of difference already, without any JS. Add some eye-candy and you will get something like the snippet (really need to go full page).
UPDATE
My motivation to go 'flexbox' anyway is the fact that you actually gave little code to start with. Also, while I personally have a speedy PC, fast GPU and a fiber-glass 200-500Mbit connection, this is not true for a lot of other people. Creating a CPU/GPU intensive webpage may eventually bite you in the tail as they tend to get sluggish, jitter or downright slow (not to mention, overly complicated).
I tend to prefer the shortest route from A to B, compact code and only the minimally required (and IE11 compatible. If it runs on IE11, it runs anywhere).
So, look at this answer as a starting point and adjust the base mechanism to meet your needs and modify the eye-candy likewise. You can always resort to JS when you need to.
UPDATE 2
Modified the code, now incorporates 3D layout with some 3D hover effect. Both parent and kids are Flexbox containers, so you can do anything FBL inside. The 3D layout remains.
REMARK: missed your first comment: added transform: scale(0.5) to child elements...
Pro TIPS
1) As a result of the 3D effect it may occur that the child elements get jagged (non-aliased) edges. If so, try adding a transparent outline to the child elements, like .container>* { ... outline: 1px solid transparent ... }. This somehow forces anti-aliassing of the edges. Beware: the regular outline will not be visible, the 'visually impaired' may not be amused...
2) Added a few buttons calling a simple one-liner JS to toggle 'custom attributes' for testing purposes.
Also added a generic, responsive page margin using 'linear equation y=mx+b'

for points p1(320,64) p2(1920,144) (top/bottom spacing) and
for points p1(320,8) p2(1920,320) (left/right spacing).

3) To top it off: responsive html fontsize varying from 14px to 20px, also 'y=mx+b' for points p1(320,14) p2(1280,20).

var body = document.body;
function toggleBodyAttrib(a) { if (body.getAttribute(a)=='1') body.setAttribute(a,'0'); else body.setAttribute(a,'1'); }
html,body               { box-sizing: border-box } /* size calculations up to and including border */
*::before,*::after, *   { box-sizing: inherit    } /* use parental calculation preference */

html,body               { width: 100%; max-width: 100%; margin: 0 } /* personal prefs */
body                    { min-height: 100% } /* fill screen */

/* responsive main fontsize, y=mx+b: for p1(320,14) p2(1280,20) */
html { font-size: calc(0.625vmin + 0.75rem) } /* 14px to 20px */

/*
    responsive <body> padding
    
    y=mx+b for points:
    T/B: p1(320,64) p2(1920,144) => y = 0.5x   + 48   (64px on a 320 display, 144px on 1920)
    L/R: p3(320, 8) p4(1920,320) => y = 0.195x - 54.4 ( 8px on a 320 display, 320px on 1920)
*/
[padded="1"]        { padding: calc(5vh + 48px) calc(19.5vw - 54.4px) }
[debug="1"] *       { outline: 1px dashed purple }

[debug] #buttonList *,
[debug] #buttonList { outline: none } /* exceptions to the rule above */

#buttonList         { position: fixed; top: 1rem; left: 1rem } /* keep them in place */

.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   */
    justify-content: space-between; /* evenly distribute inside given space */

    width  : 50%;    /* some preferred with */
/*    padding: 1rem;   /* inner spacing (obsolete: now using <body padded="1">) */
    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-out; /* 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;       /* preferred size, square */
    min-height: 5rem;

    margin    : -0.75rem;   /* some negative margin to compensate 50% scale */
    transform: scale(0.5);  /* scale down 50% */

    /* 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) }
<body padded="1">
<div id="buttonList">
    toggles:
    <button onclick="toggleBodyAttrib('padded')">padding</button>
    <button onclick="toggleBodyAttrib('debug')" >debug  </button>
    <!-- add your own custom debugging [attribute] toggles -->
</div>

<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>test29</div>
  <div>test30</div>
  <div>test31</div>
  <div>test32</div>
  <div>test33</div>
</div>
</body>

