Placing three flip-boxes in a circular form - html

Question

I wish to place three flip-boxes in a circular form. Below is the code I got:
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>
The issue is that I can't succeed in placing the second and third flip-boxes at their respective place (i.e facing eachother and on the same horizontal line, below the first one) as I succeeded in placing the first flip-box at its position. I've looked through several times and I can't still figure out the typo.
Thanks for some help.

Answer 1

In this case you need to use absolute positions not relative however I added a wrapper div around all items which has relative position. Also Add position:absolute and display:inline-block to all three boxes as the divs are blocks by default;
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>