将 DIV 彼此相邻排列并用 CSS 翻转它们答案

【问题标题】：Arrange DIVs adjacent to each other and flip each of them with CSS将 DIV 彼此相邻排列并用 CSS 翻转它们
【发布时间】：2017-08-10 21:33:22
【问题描述】：

请看下图。

将鼠标悬停在 DIV 上应该会翻转它，显示不同的内容（“卡片”的“背面”。）

通过下面的相关代码，我设法

得到由彩色DIVs 显示的排列，但不能像白人那样彼此相邻。
从每个DIV的开始获取翻转动画，而应该从每个DIV的中心获取。

对于翻转动画，我使用了this 资源。对于DIV 展示位置，我使用了this SO post 等。

Relevant HTML

<html>
    <head>
      <title>My Website</title>
      <script src="my.js"></script>
      <script src="jq_js/jquery-3.1.1.min.js"></script>
      <link rel="stylesheet" type="text/css" href="bs/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="css/my.css">
      <link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
      <link href='//fonts.googleapis.com/css?family=Lobster Two' rel='stylesheet'>
      <script src="bs/js/bootstrap.min.js"></script>
    </head>
    <body onload = "javascript: isLoggedIn();">
      <div class="container">
        :
        :
        :
        :
        <div  id="results">
        </div>
      </div>
    </body>
</html>

Relevant CSS

/* 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;
}

Relevant JavaScript / JQuery

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()

如果有人可以查看并帮助完成我的计划，我将不胜感激。现在被卡住了一段时间。非常感谢！

【问题讨论】：

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

标签： javascript jquery html css flip

【解决方案1】：

呸！终于得到了想要的结果。

将DIVs 彼此相邻放置，这是行之有效的样式。 display 和 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-index 是关键。这是有效的（参考：CSS Layout: The Position Property）：

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

希望这对某人有所帮助。感谢所有观看的人！

【讨论】：