Html 如何安排悬停效果的重叠图像？

我有一只企鹅，我想给它一些悬停效果。理想情况下，头部会向后倾斜，翅膀在悬停时会抬起，但头部和翅膀都位于身体后面。目前，我让它们彼此绝对定位，并使用z-索引对它们进行适当排列（翅膀、头部、身体）

HTML:

然而，我意识到，因为身体是最外层的，所以头部和身体不会触发悬停效果。有没有其他方法让我的企鹅也按我想要的方式移动？理想情况下，身体仍会保持在前方，因为这样它就可以隐藏翅膀和头部的内边缘

任何帮助都将不胜感激，非常感谢

<img src="assets/images/king/head.png" class='penguin head'>
<img src="assets/images/king/body.png" class='penguin body' style="filter: drop-shadow(0px 5px 3px grey)">
<img src="assets/images/king/left.png" class='penguin wings leftWing' style="filter: drop-shadow(0px 5px 3px grey)">
<img src="assets/images/king/right.png" class='penguin wings rightWing' style="filter: drop-shadow(0px 5px 3px grey)">

 .penguin {
    position: absolute;
}

.head {
    z-index: 1;
}

.leftWing {
    z-index: 0;
}

.rightWing {
    z-index: 0;
}

.body {
    z-index: 2;
}

.head:hover {
    animation: tilt 3s infinite;
}
    
.rightWing:hover {
    animation: liftRight 3s infinite;
}

.leftWing:hover {
    animation: liftLeft 3s infinite;
}

@keyframes tilt {
    50% {transform: rotate(5deg)}
}

@keyframes liftRight {
    50% {transform: rotate(-25deg)}
}

@keyframes liftLeft {
    50% {transform: rotate(25deg)}
}