背面可见性不适用于儿童

Question

此解决方案 (Webkit backface visibility not working) 不起作用，因为我希望在容器内有其他应显示背面的转换对象。

.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>

那只猫的背面不应该是可见的。这个问题有什么解决办法吗？

Answer 1

我终于发现了如何解决这个问题！ 问题是 3d 没有影响图像。只需添加属性：transform-style: preserve-3d; 将图像包含为“3d 世界”的一部分。以前，背面属性不起作用，因为它真的不是 3d！这就像在父级表面上绘制的纹理。现在它是一个包含所有组件的 3d 实体，它可以在 3d 中转换而不会折叠到父级的表面。

.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>

Answer 2

编辑 在要转换的元素上设置 backface-visibility: hidden; 解决问题

.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>