这个解决方案(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);
}Box" name="" id="" />
最佳答案
我终于发现了如何解决这个问题！
问题是3d没有影响图像.只需添加属性：transform-style：preserve-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);
}
Box" name="" id="" />
