CODEWITHSUNDEEP
csscss-transforms
Vandervals
Vandervals

Reputation: 6054

Backface Visibility not working on children

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?

Upvotes: 7

Views: 4606

Answers (2)

Vandervals
Vandervals

Reputation: 6054

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>

Upvotes: 15

maioman
maioman

Reputation: 18744

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>

Upvotes: 1

Related Questions