CODEWITHSUNDEEP
csscss-transforms
Moaaz Bhnas
Moaaz Bhnas

Reputation: 1170

Can't hide the back face of an element with backface-visibility: hidden

Here I have an image and a description inside a container.
I want when I flip the container, the image hides and the description shows up, so I used backface-visibility: hidden; on the image, but it didn't work.

.scene {
  width: 200px;
  height: 150px;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform .4s;
}

.image,
.description {
  position: absolute;
  width: 100%;
  height: 100%;
}

.scene:hover .container {
  transform: rotateY(180deg);
}

.image {
  backface-visibility: hidden;
}
<div class="scene">
  <div class="container">
    <div class="description">
      Kurapica is an anime character.
    </div>
    <img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
  </div>
</div>

Upvotes: 0

Views: 1180

Answers (4)

DigitNerd
DigitNerd

Reputation: 137

You need to add on the description element a hidden backface-visibility property too and rotate it to 180deg. That way it will be hidden on a non-hover state. Add the property transform-style: preserve-3d on the container element and that should do it.

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

backface-visibilty:hidden on .image will not work as you are rotating the .container not .image...

so rotate the .image and .description instead of .container to get the desired effect

.scene {
  width: 200px;
  height: 150px;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.image,
.description {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform .4s;
}

.description {
  transform: rotateX(-180deg);
  background: red;
  display: flex;
  align-items: center;
  text-align: center;
}

.scene:hover .image {
  transform: rotateX(180deg);
}

.scene:hover .description {
  transform: rotateX(0deg);
}
<div class="scene">
  <div class="container">
    <div class="description">
      Kurapica is an anime character.
    </div>
    <img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
  </div>
</div>

Upvotes: 4

Miguel Calder&#243;n
Miguel Calder&#243;n

Reputation: 3091

You have to set the transformed element's backface-visibility too:

.scene:hover .container {
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272986

Because you have to rotate the image where you specified the backface-visibility:

.scene {
  width: 200px;
  height: 150px;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.image,
.description {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform .4s;
}

.scene:hover .container .image {
  transform: rotateX(180deg);
}

.image {
  backface-visibility: hidden;
}
<div class="scene">
  <div class="container">
    <div class="description">
      Kurapica is an anime character.
    </div>
    <img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
  </div>
</div>

Upvotes: 1

Related Questions