彼此相邻排列DIV，并使用CSS翻转每个DIV

Question

Please see the image below. 请参见下图。

Hovering over a DIV should flip it, revealing different content (the 'back' of the 'card'.) 将鼠标悬停在DIV应将其翻转，以显示不同的内容（“卡片”的“背面”）。

With the relevant code below, I've managed to 使用下面的相关代码，我设法

get the arrangement shown by the coloured DIV s, but not adjacent to each other, like the whites. 得到由彩色DIV表示的排列，但彼此之间不相邻，就像白色。
get the flip animation from the beginning of each DIV , while should be from the center of each DIV . 从每个DIV的开头获取翻转动画，而应该从每个DIV的中心获取 。

For the flip animation, I used this resource. 对于翻转动画，我使用了此资源。 For the DIV placement, I used, among others, this SO post . 对于DIV放置，除其他外，我使用了此SO帖子。

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

Greatly appreciate if someone can look in and help complete what I've set out to. 非常感谢有人可以浏览并帮助完成我提出的目标。 Been stuck for sometime now. 现在被卡住了一段时间。 Many thanks in advance! 提前谢谢了！

Answer 1

Phew! ！ Got the desired result finally. 终于得到了预期的结果。

To place DIV s adjacent to each other, this is the style that worked. 要将DIV彼此相邻放置，这是DIV的样式。 The display and flex-flow elements clinched it. 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;
}

For the flip animation, the z-index for the 'back' of the 'card' was the clincher. 对于翻转动画，“卡片”“背面”的z-index是关键。 This is what worked (Ref: CSS Layout: The Position Property ): 这是起作用的（参考： CSS Layout：Position属性）：

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

Hope this is of help to someone. 希望这对某人有帮助。 Thanks to all who looked in! 感谢所有看过的人！

彼此相邻排列DIV，并使用CSS翻转每个DIV

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-03-19 18:57:31

彼此相邻排列DIV，并使用CSS翻转每个DIV

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-03-19 18:57:31

解决方案1
1 已采纳 2017-03-19 18:57:31