0

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
23
Views
1 Year
Discussion Span
Last Post by rouse
0

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

0

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.

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.