Javascript 将div彼此相邻排列，并使用CSS翻转每个div

请看下图

将鼠标悬停在DIV上时，应将其翻转，在“卡片”的“背面”显示不同的内容

通过下面的相关代码，我成功地

获得由彩色div显示的排列，但不要像白色那样彼此相邻。 从每个DIV的开始获取翻转动画，而从每个DIV的中心获取翻转动画。 对于翻转动画，我使用了资源。对于DIV的放置，我使用了，除其他外

相关HTML

相关JavaScript/JQuery

---

非常感谢如果有人能帮我完成我的计划。我被困了一段时间了。非常感谢

呸！最终达到了预期的效果

要将div彼此相邻放置，这是行之有效的样式。显示屏和flex flow元素将其固定

/* Dealet Card */
.dealet-container
{
  display: inline-table; 
  perspective: 1000px;  
}

.dealet 
{
    margin: 14px;
    float: left;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-sizing: border-box;
    display: table-cell;
    flex-flow: row wrap;
    transition: 0.6s;
}

对于翻转动画，“卡”背面的z索引是关键。这就是工作原理参考：：

---

希望这对某人有帮助。多亏了所有进来的人

有一个类似的翻转卡片布局，也许你可以用来学习。@James，正是我要找的，谢谢！我会很快回答这个问题。。。

/* Dealet Card */
.dealet-container
{
  /*display: inline-flex; */
  perspective: 1000px;  
}

.dealet-container, .front, .back
{
  width: 200px;
  height: 170px;
}

.dealet 
{
    /*width: 18%;*/
    margin-left: 14px;
    float: left;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-sizing: border-box;
    display: table-cell;
    flex-flow: row wrap;
    transition: 0.9s;
}

.dealet:hover 
{
  background-color: lightblue;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
/*  transform: rotateY(180deg);
*/}

.dealet-container:hover .flipper, .dealet-container.hover .flipper 
{
  transform: rotateY(180deg);
}

.flipper
{
  transition: 0.9s;
  transform-style: preserve-3d;
  position: relative;
}

.front
{
  z-index: 2;
  transform:rotateY(0deg);
}

.back
{
  transform:rotateY(180deg);
}

.front, .back
{
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;  
}

.dealet_box 
{
  padding: 6px 6px;
}

.dealet_img
{
  width: 100%;
}

.dealet_logo
{
  width: 60%;
}

.dTop
{
  font-family: 'Lobster';
  font-size: 16px; 
}

.dBot
{
  font-family: 'Lobster Two';
  font-size: 14px;
}

function drawCard(myArray)
{
  var resultsDiv = document.getElementById('results');
  resultsDiv.innerHTML = "";

  var html = [""];

  $.each(myArray, function(cardNum, value)
  {
    dealet = myArray[cardNum].dealet;
    dealetID = "dealet" + cardNum;
    dTopID = "dTop" + cardNum;
    dBotID = "dBot" + cardNum;

    logo = myArray[cardNum].logo;
    addr = myArray[cardNum].address;
    mob = myArray[cardNum].mobile;

    // Card front
    htmlFString = [  '<div class="dealet-container">',
              '<div class="flipper">',
              '<div class="dealet front" id=f' + cardNum + '>',
                      '<img id="' + dealetID + '" src="' + dealet +  '" class="dealet_img">',
                      '<div class="dealet_box">',
                        '<span class="dTop" id="' + dTopID + '">' + myArray[cardNum].name_top + '</span><br>',
                        '<span class="dBot" id="' + dBotID + '">' + myArray[cardNum].name_bottom + '</span>',
                      '</div>',
                      '</div>'
                     ].join('');
    // Card back                     
    htmlBString = [ '<div class="dealet back" id=b' + cardNum + '>',
                      '<img src="' + logo +  '" class="dealet_logo" align="center">',
                      '<div class="dealet_box">',
                        '<span>' + addr + '</span><br>',
                        '<span>' + mob + '</span>',
                      '</div>',
                      '</div>',
                      '</div>',
                      '</div>'
                     ].join('');
    html += htmlFString;
    html += htmlBString;
  });

  resultsDiv.innerHTML = html;

} // of drawCard()

/* Dealet Card */
.dealet-container
{
  display: inline-table; 
  perspective: 1000px;  
}

.dealet 
{
    margin: 14px;
    float: left;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-sizing: border-box;
    display: table-cell;
    flex-flow: row wrap;
    transition: 0.6s;
}

.back
{
  transform:rotateY(180deg);
  position: absolute;
  z-index: -1;
}