All geek questions in one place

Bootstrap 4 pop-up menu appears behind other items

I have problems with bootstrap 4 dropdown menu, if there is enough space, and the drop-down menu opens from top to bottom, the entire menu displays normally, but if the menu opens from top to bottom, some menu itemsappear behind other divs. How can I fix this and why does this only happen in a specific case? I tried with relative position and z-index, but it does not work.

Update : @ZimSystem's answer is fine, but it didn’t fix my problem, so I updated my code to accurately reproduce the problem I am facing.

Here is the simplified code:

$(document).ready(function() {
    $('.container').hover(function() {
        if (!$(this).find('.card').hasClass('flipped')) {
            $(this).find('.card').toggleClass('flipped')
        }
        $(this).find('.card').addClass('hovered');
    }, function() {
        var val = $(this).find('.card');
        $(this).find('.card').removeClass('hovered');
        setTimeout(function() {
            if (!val.hasClass('hovered')) {
                val.removeClass('flipped')
            }
        }, 1000);
    });

});
.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
.dropdown a{
    width: 100% !important;
}
.dropdown-item{
    color: black !important;
}
.dropdown-menu{
    height: auto !important;
}

.container {
  width: 150px !important;
  height: 150px;
  float: left;
  position: relative;
  margin: 3% 2.25% 0 2.25%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}


.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="main"><br>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

</div>
Run codeHide result
+4
source share
2 answers

( )

, transform-style: preserve-3d; .card z- . popper.js , translate3d(x,x,0) CSS .

z- 0, , transform-style: preserve-3d;, -. dropdown-menu z-order, translate3d...

.dropdown {
   margin-top: 30%;
   transform-style: preserve-3d;
   transform: translate3d(0,0,10px) !important;
}

.dropdown-menu{
    height: auto !important;
    position: relative !important;
    transform: translate3d(0,0,10px) !important;
}

, z- , translate3d, transform-style: preserve-3d;. , transform-style: preserve-3d; (#main, .container, .back, .test .dropdown)..

Codeply

z-index: 99999 !important; .dropdown , . z-index...

.dropdown{
    width: 100%;
    margin-top: 30%;
}

popper.js, . data-flip="false", .

https://www.codeply.com/go/R0ePzWnvPC

.test{
    width: 150px;
    height: 150px;
    margin: 3% 2.25% 0 2.25%;
    float: left;
    background-color: lightgrey;
    position: relative;
    perspective: 800;
}
.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>
<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 9</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>
Hide result
+4

, div float-left float .container .

$(document).ready(function() {
    $('.container').hover(function() {
        if (!$(this).find('.card').hasClass('flipped')) {
            $(this).find('.card').toggleClass('flipped')
        }
        $(this).find('.card').addClass('hovered');
    }, function() {
        var val = $(this).find('.card');
        $(this).find('.card').removeClass('hovered');
        setTimeout(function() {
            if (!val.hasClass('hovered')) {
                val.removeClass('flipped')
            }
        }, 1000);
    });

});
.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
.dropdown a{
    width: 100% !important;
}
.dropdown-item{
    color: black !important;
}
.dropdown-menu{
    height: auto !important;
}

.container {
  width: 150px !important;
  height: 150px;
  float: right;
  position: relative;
  margin: 3% 2.25% 0 2.25%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}


.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="main"><br>
<div class="float-left">
<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
</div>
</div>
Hide result
+1

Source: https://habr.com/ru/post/1695356/

More articles:


All Articles