以圆形形式放置三个翻转框

Question

我希望将三个翻转框放置成圆形。下面是我得到的代码：

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateX(180deg);
}

/* position of parent-flipbox */
.first-flipbox{
  width:471px;
  height:471px;
  position: relative;
} 

/* child flipbox positions */
.first-flipbox{ left: 184px; top: -38px; }
.second-flipbox{ left: 376px; top: 295px; }
.third-flipbox{ left: -8px; top: 295px; }

<div class="first-flipbox">
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>
</div>


<div class="second-flipbox">
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>
</div>


<div class="third-flipbox">
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>
</div>

问题是，我无法成功将第二个和第三个翻转框放置在它们各自的位置（即彼此相对，并在同一个水平线上，位于第一个翻转框的下方），而我没有成功放置第一个翻转的框，盒在其位置。我已经浏览了好几次，但仍然无法弄清错字。

感谢您的帮助。

Answer 1

在这种情况下，您需要使用绝对位置而不是相对位置，但是我在所有具有相对位置的项目周围添加了包装div。同时将position:absolute和display:inline-block添加到所有三个框中，因为div默认是块；

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateX(180deg);
}

/* position of parent-flipbox */
.first-flipbox{
  width:471px;
  height:471px;
  position: relative;

} 

/* child flipbox positions */
.first-flipbox{   position:absolute;display:inline-block;left: 184px; top: -38px; }
.second-flipbox{   position:absolute;display:inline-block;left: 376px; top: 295px; }
.third-flipbox{  position:absolute;display:inline-block; left: -8px; top: 295px; }

<div style="position:relative">

  <div class="first-flipbox">
  <div class="flip-box">
    <div class="flip-box-inner">
      <div class="flip-box-front">
        <h2>Front Side</h2>
      </div>
      <div class="flip-box-back">
        <h2>Back Side</h2>
      </div>
    </div>
  </div>
  </div>


  <div class="second-flipbox">
  <div class="flip-box">
    <div class="flip-box-inner">
      <div class="flip-box-front">
        <h2>Front Side</h2>
      </div>
      <div class="flip-box-back">
        <h2>Back Side</h2>
      </div>
    </div>
  </div>
  </div>


  <div class="third-flipbox">
  <div class="flip-box">
    <div class="flip-box-inner">
      <div class="flip-box-front">
        <h2>Front Side</h2>
      </div>
      <div class="flip-box-back">
        <h2>Back Side</h2>
      </div>
    </div>
  </div>
  </div>

</div>