css - 背面可见性不适用于 child

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 世界”的一部分。之前，backface 属性不起作用，因为它真的不是 3d!它就像是画在 parent 表面上的纹理。现在它是一个包含所有组件的 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>