I have CSS flip map animation only, where the other side of the map is displayed when the user hovers over the container: https://jsfiddle.net/qb7unks5/3/ .
Both sides of the map must be interactive. Ideally, the entire container will be a clickable link, but the code that I have for this does not work in Firefox. Since links in JSFiddle never work in Firefox, you cannot actually see this using JSFiddle, but if you had to save code and run it yourself, you will find that often the link is not activated in Firefox under two circumstances:
(1) When you quickly move the mouse into the container and click on the text of the red card. The text turns black, which indicates the activation of the a:active effect, but the link is actually not activated.
(2) When you click on the white (not red, not blue) area of the container with a gray border, when the animation of the flip card is active, sometimes the link is not activated.
Both of these problems only occur in Firefox, not in Chrome. And again, due to the way JSFiddle in Firefox handles links, you cannot tell using the JSFiddle link.
The problem is that, apparently, if you click on a link that is somehow related to a rotating figure in Firefox, and this figure “rotates” almost immediately after , the a:active state of the link is activated, but the link is not activated!
So, I assume that I need to create a <a style='display:block'> block of the same size and shape of the container, make its z-index higher than that of the shapes, and by doing this, essentially make the area of the entire container clickable by a link not directly related to the numbers. Is there a better solution?
figure { margin: 0; } .container { width: 200px; height: 260px; position: relative; margin: 0 auto 40px; border: 1px solid #CCC; -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; } .container:hover .card { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .card figure { display: block; height: 100%; width: 100%; line-height: 260px; text-align: center; font-weight: bold; font-size: 30px; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .front { background: red; } .card .back { background: blue; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } a { color: white; } a:active { color: black; }
<a href="http://google.com"> <div class="container"> <div class="card"> <figure class="front">Some test text</figure> <figure class="back">More text</figure> </div> </div> </a>