Question 236667 in Html Question posted in
Some basic documentation can be found here.

Html – I can't flip this image, what am I doing wrong?

I’m trying to flip between two images, but it’s not working. Where is my mistake?
I already checked and remade the code so many times.

When I hover over the image it doesn’t change to another one.

.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
.flipper{
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper{
  transform: rotateX (180deg)
}
.back{
  transform: rotateY(180deg);
}
.front, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Caused by a typo.

    Your code has:

    transform: rotateX (180deg)

    But it needs to be:

    transform: rotateX(180deg);

    .flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper {
  transform: rotateX(180deg);
}
.back{
  transform: rotateY(180deg);
}
.front, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
    <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I see a couple of issues in your code that might be causing the flipping effect not to work as intended.

    CSS transform Syntax Error: In your hover selector, you have a syntax error in the transform property. The correct syntax should not have a space between the function name (rotateX) and the opening parenthesis.

    Incorrect: transform: rotateX (180deg);

    Correct: transform: rotateX(180deg);

    Hover Effect Not Resetting: The hover effect might not reset properly because the flip container’s size is determined by the content’s size, which changes when you rotate the content. This can cause the hover area to change during the animation. To fix this, you can set a fixed size for the .flip-container.

    Here’s the corrected code:

    .flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Add vendor prefixes for better browser compatibility */
.flip-container:hover .flipper {
  transform: rotateX(180deg);
}

.back {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
    <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" alt="Front Image" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" alt="Back Image" />
    </div>
  </div>
</div>

    Make sure to include the corrected code in your HTML and CSS files. This should resolve the issues you were facing with the image flip effect not working properly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search