I created a div that flips when clicked using some HTML and CSS code. It works perfectly in Firefox 39 and Chrome 43. Here is the markup:
<div class="flip-wrapper flippable-wrapper" id="fliptest-01">
<div class="flip-wrapper flippable">
<div class="front-outer flippable-front">
<div class="front-inner"></div>
</div>
<div class="back-outer flippable-back">
<div class="back-inner"></div>
</div>
</div>
</div>
This is the CSS code used:
.flippable-wrapper{
position:relative;
perspective:800px;
}
.flippable{
transition: transform 0.5s ease 0.1s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.flipped{
transform:rotateX(180deg);
}
.flippable-front{
backface-visibility: hidden;
}
.flippable-back{
transform:rotateX(180deg);
backface-visibility: hidden;
}
A JavaScript onclick event handler dynamically toggles the .flipped CSS class on the .flippable div.
However, I encountered an issue with the mouseover event in Chrome. When the div is flipped (showing the back face), the outermost div (with id="fliptest-01") seems to be blocking its children from receiving the mouseover event. Is there a way to solve this problem? In Firefox, both front and back sides receive the mouseover event correctly.
For the full code and example, you can view it on CodePen here.