CSS渲染平面

我这里有一个简单的例子：

.card{
位置：绝对位置；
宽度：200px；
高度：200px；
背景色：番茄；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
变换样式：保留-3d；
透视图：700px；
}
.飞机{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
填充：15px；
背景：#ee8c25；
转换：转换1000ms线性；
框大小：边框框；
}
飞机：第一个孩子{
/*变换：旋转（180度）*/
}
飞机：最后一个孩子{
/*变换：旋转（180度）*/
背景：#d14730；
背面可见性：可见；
}

第一架飞机
第二架飞机

如果删除

变换样式：保留-3d它在同一平面上结束。我想这是有道理的，因为它在第一个
.plane
前面转换

我不确定是否可以在保留3d空间的同时进行变换，并在第一个
.plane
平面上方完成变换。因为如果元素在Y轴上旋转180度，并在3D空间中进行渲染，则意味着它们将始终位于一切的后面。元素的样式将与前面显示的样式完全相同，但在后面会反转。Z轴本质上就像一面镜子


请参见下面的代码（使用
变换样式：preserve-3d；
已删除），以及通过控制台激活
变换：旋转（180度）
css时显示结果的上方gif


.card{
位置：绝对位置；
宽度：200px；
高度：200px；
背景色：番茄；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
/*变换样式：保留-3d*/
透视图：700px；
}
.飞机{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
填充：15px；
背景：#ee8c25；
转换：转换1000ms线性；
框大小：边框框；
}
飞机：第一个孩子{
/*变换：旋转（180度）*/
}
飞机：最后一个孩子{
/*变换：旋转（180度）*/
背景：#d14730；
背面可见性：可见；
}

第一架飞机
第二架飞机
是，没有3d选项，这是合乎逻辑的，因为这是绘画顺序。。。我也不明白这是怎么回答这个问题的？我很确定3D是必要的，我们需要知道为什么会有这样的行为。另外，这种行为与跨浏览器行为不同，因此了解好的行为和为什么我明白你的意思会很有意思，给两分钟时间来检查这就是我认为的preserve-3d行为，他的例子见此。我认为preserve-3d essential是一个z轴。如果是这样的话，这就回答了他的问题。当两者都旋转时，这是直观的，我也这样想。。。但尝试一次只旋转一个，在不同的浏览器（Chrome和FF）中，您将看到不同的行为。。。这是一个奇怪的部分，在这里我们无法对行为做出明确的结论，因为它的行为不同。我说的是单独旋转它们，因为它们是兄弟，它们使用的是相同的父级preserve-3d样式。虽然您完全正确，但在WebKit浏览器中，您会得到逻辑结果，但在Firefox中，它似乎忽略了最终渲染时的preserve-3d样式。非常奇怪，斑点很好！