同一父元素的两个子元素都定位absolute，他们在3D空间上的关系是怎样的

代码

* { margin: 0; padding: 0; } div { width: 200px; height: 200px; position: absolute; left: 40%; top: 40%; transition: 4s; transform-style: preserve-3d; } div p { width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 20px; position: absolute; } div p:nth-child(1) { background: #ff0; } div p:nth-child(2) { background: #f00; } div:hover { transform: rotateY(180deg); }
</head>
<body>
    <div>
        <p>背面</p>
        <p>正面</p>
    </div>
</body>

翻转之前显示的是“正面”，翻转180度后为什么还是“正面”?
如果给“背面”加transform: rotateY(180deg);让其在Y轴旋转或者在X轴旋转180度“背面”就能显示出来，不懂这个原理是什么？