代码
* { 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度“背面”就能显示出来，不懂这个原理是什么？
