背面可见性不适用于儿童

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

编辑在您要转换的元素上设置 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>

Answer 2

我终于找到解决方法了！问题是 3d 不影响图像。只需添加属性: transform-style: preserve-3d; 即可将图像包含为“3d 世界”的一部分。之前，背面属性不工作，因为它真的不是 3d！就像是在parent的表面画上了一层纹理。现在它是一个包含所有组件的 3d 实体，它可以在 3d 中转换而不会塌陷到 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>

背面可见性不适用于儿童

Backface Visibility not working on children

css

css-transforms