Member Avatar for rouse

In this HIML I am flipping an icon on a hover using CSS3 transform. When this HTML is run, the hover is contained in the vertical dimension but not in the horizontal dimension. I wonder if anyone know why?

<!DOCTYPE html>
<html>
    <head>
        <title>Flip Card Demo title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/icon" href="favicon.ico" />
        <style>
            header, footer, section, aside, nav, article {
                display:
                    block;
            }
            .mainContainer{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .flipContainer:hover .flipImage {
                -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }

            .flipContainer .flipImage, .flipContainer:hover .flipImage {
                width: 256px;
                border: 2px blue dotted;
                -webkit-transition: all 0.7s ease;
                transition: all 0.7s ease;
            }
        </style>
    </head>
    <body>
        <div class="flipContainer">
            <img class="flipImage" src='img/icons/256x256/calendar.png' alt="Smiley face" height="256" width="256">
        </div>
    </body>
</html>
  • 2 Contributors
  • 4 Replies
  • 237 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rouse
Member Avatar for gentlemedia

With this transform: rotateY you rotate over the y-axis thus vertical. To flip horizontal you'll need to rotate over the x-axis; transform: rotateX

Edited by gentlemedia
Member Avatar for rouse

The rotation is not my concern it is the hover area. If you move the cursor over the icon it will flip. If you exit the icon by going up or down the icon flips back to the original front. If you exit to the left, the reverse images does not respond to the hover until you are above or below the the image container. That's the problem I am asking for help.

Member Avatar for gentlemedia

I see what you mean now and that's because you set the hover on .flipContainer and this div fills the whole width of the page and therefore the effect only works if you leave that div with your cursor up or down.

Instead you should hover the image, so like this:

.flipImage {
  border: 2px blue dotted;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.flipImage:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
Edited by gentlemedia
Member Avatar for rouse

Thanks! That makes sense now.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.