After experimenting with a flip menu that utilizes the bootstrap dropdown menu and transform, I noticed that while the flip effect is functioning properly, the drop-down menu appears underneath the form elements despite having z-index applied to it.
Upon further research, I discovered that this issue is related to stacking context problems that arise when using transform effects. However, I have not been able to find a solution yet.
If you want to view the code, you can access it through this link. The reason why the z-index is not being applied correctly lies within the following code snippet:
.frontbar {
transform: translateY(0%) rotateX(0deg);
transition: all 0.5s;
transform-origin: 50% 100%;
}
.menubar {
transform: rotateX(-90deg);
transition: transform 0.5s;
transform-origin: 50% 0%;
}
- Click on the Flip button
- Then click on the menu; you will notice that the submenu in the dropdown appears underneath the form elements