javascript-重疊透明圖像上的翻轉效果

Question

我想在重疊的透明圖像上添加翻轉效果。

例如：

下圖分為5個部分，我想在每個部分上添加翻轉效果（不同的圖像）

在此處輸入圖片說明

當O嘗試使用div或img標簽時，圖像將呈現為矩形，因此翻轉效果不合適。 當我將鼠標懸停在黃色之間的綠色部分時，黃色圖像會突出顯示，因為它的z索引很高。

以下是我嘗試過的代碼：

<body>
<br />
<img src="part1.png" onclick="console.log('test1');"/>
<img src="part2.png" onclick="console.log('test2');" style="position:absolute; left:30px; top: 19px;"/>
<img src="part3.png" onclick="console.log('test3');" style="position:absolute; left:70px; top: 15px;"/>
<img src="part4.png" onclick="console.log('test4');" style="position:absolute; left:95px; top: 16px;"/>
<img src="part5.png" onclick="console.log('test5');" style="position:absolute; left:123px; top: 24px;"/>    
</body>

圖片=> 第1部分，第2部分，第3部分，第4部分，第5部分