同一父元素的两个子元素都定位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度“背面”就能显示出来,不懂这个原理是什么?

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问