CSS问题：容器rotateY旋转180deg时上层元素为何始终置顶？

你的代码无法实现翻牌后显示下层元素的核心原因有两个：

• 未开启3D空间渲染：容器的transform-style属性默认值为flat，会将所有子元素拍平在容器的2D平面上渲染。此时你给容器加的rotateY旋转本质是旋转整个2D平面，子元素之间的堆叠顺序完全遵循平面内的DOM先后、z-index规则，不会随3D旋转改变前后关系。
• 元素背面默认可见：CSS的backface-visibility属性默认值为visible，也就是说元素旋转180度背面朝向用户时，仍然会显示内容。你的代码里item-2DOM顺序晚于item-1，默认堆叠在上层，容器旋转后item-2的背面仍然会覆盖在item-1上方，自然看不到下层的橙色元素。

要达到预期的正反翻转效果，需要补充以下配置：

1. 给.container添加transform-style: preserve-3d，让子元素在3D空间中渲染，旋转时会按照真实的空间位置判断前后层级
2. 给所有.item添加backface-visibility: hidden，元素翻转到背面时自动隐藏，不会遮挡正面元素
3. 给需要作为背面展示的item-1添加初始transform: rotateY(180deg)，容器翻转180度时它刚好正面朝向用户，同时正面的item-2翻转到背面隐藏。

内容的提问来源于stack exchange，提问作者user16433198