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;将图像作为＆＃34; 3d世界＆＃34;的一部分。以前，背面属性不起作用，因为它真的不是3D！它就像在父母表面上绘制的纹理。现在它是一个包含所有组件的3d实体，它可以在3d中转换而不会折叠到父级的表面。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

EDIT 在你正在改造的元素上设置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>

背面可见性不适用于儿童

2 个答案: