Backface Visibility not working on children

Question

This solutions (Webkit backface visibility not working) didn't work, as I'd like to have other transformed objects inside container that should show the backface.

.container {
  position: relative;
  transform-origin: 50% 50% 0;
  transition: transform 1s ease 0s;
  width: -moz-min-content;
  width: -webkit-min-content;
}
.container img {
  backface-visibility: hidden;
}
input:checked + .container {
  transform: rotateY(180deg);
}

<input type="checkbox" name="" id="" />
<div class="container">
  <img src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="" />
</div>

The backface of that cat shouldn't be visible. Any solution for this problem?

The title says it: when the image turns, both faces are visible, but the backface should be invisible — Vandervals, Jun 17 '15 at 12:45

Vandervals · Accepted Answer · 2018-06-12T12:24:17.723

I finally discovered how to solve this! The problem was the the 3d was not affecting the image. Just by adding the property: transform-style: preserve-3d; includes the image as part of the "3d world". Before, the backface property wasn't working, because it really wasn't 3d! It was like a texture painted on the parent's surface. Now it is a 3d entity with all its components and it can be transformed in 3d without collapsing to the surface of the parent.

.container {
  position: relative;
  transform-origin: 50% 50% 0;
  transition: transform 1s ease 0s;
  width: -moz-min-content;
  width: -webkit-min-content;
  transform-style: preserve-3d;
}
.container img {
  backface-visibility: hidden;
}
input:checked + .container {
  transform: rotateY(180deg);
}

<input type="checkbox" name="" id="" />
<div class="container">
  <img src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="" />
</div>

Be aware of the "-webkit-transform-style: preserve-3d;" for Chrome, Safari & Opera. I forgot this and started to do all sorts of manipulation until I found that this answer and understood I had forgotten the -webkit-version since I was testing in Safari. Thanks for saving me a lot of time!!! :D — Asle G, Apr 29 '16 at 19:20

maioman · Answer 2 · 2015-06-17T13:54:31.937

1

EDIT setting backface-visibility: hidden; on the elem you're transforming solve the issue

.container {
  position: relative;
  transform-origin: 50% 50% 0;
  transition: transform 1s ease 0s;
  width: -moz-min-content;
  width: -webkit-min-content;
}
.container{
  backface-visibility: hidden;
  
}
input:checked + .container {
  transform: rotateY(180deg);
}

<input type="checkbox" name="" id="" />
<div class="container">
  <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg" alt="" />
</div>

edited Jun 17 '15 at 13:54

answered Jun 17 '15 at 13:14

maioman

18,154
4
36
42

I'm afraid that container can't have backface-visibility hidden. If it could, the answer would be just transforming it. That is why I said that the solution I linked to isn't usefull in this case. – Vandervals Jun 17 '15 at 13:39
you're rotating .container – maioman Jun 17 '15 at 13:47
yeah, but I don't want to hide every objects backface inside the container, only that image – Vandervals Jun 17 '15 at 13:51

Backface Visibility not working on children

2 Answers2