HTML炫酷動態圖片代碼，讓我們一起來學習如何制作這樣的圖片效果。

<!-- 建立一個wrap類 -->
<div class="wrap">
<!-- 建立四個div類，每個類的容器里面嵌套一張圖片 -->
<div class="box box1">
<img src="image1.jpg" alt="image1"/>
</div>
<div class="box box2">
<img src="image2.jpg" alt="image2"/>
</div>
<div class="box box3">
<img src="image3.jpg" alt="image3"/>
</div>
<div class="box box4">
<img src="image4.jpg" alt="image4"/>
</div>
</div>
<!-- 導入相關CSS -->
<style>
.wrap {
width: 500px;
height: 500px;
position: relative;
margin: 0 auto;
}
.box {
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.box img {
width: 100%;
height: 100%;
}
.box1 {
z-index: 4;
transform-origin: top left;
}
.box2 {
z-index: 3;
transform-origin: top right;
}
.box3 {
z-index: 2;
transform-origin: bottom right;
}
.box4 {
z-index: 1;
transform-origin: bottom left;
}
.box1:hover {
transform: rotateY(-180deg);
}
.box2:hover {
transform: rotateX(-180deg);
}
.box3:hover {
transform: rotateY(180deg);
}
.box4:hover {
transform: rotateX(180deg);
}
</style>

代碼解釋：

首先，在HTML中建立一個名為wrap的類，容器里面包含四個名為box的類，每個容器里面嵌套一張圖片，圖片路徑自行替換。然后，在CSS中設置容器wrap的寬高及定位，box類的寬高和定位，以及圖片的寬高。其中，box類的z-index屬性值可以控制圖片的層疊關系，transform-origin屬性可以控制圖片的旋轉軸。最后，在鼠標懸停在box1至box4上時，通過改變transform屬性值來實現圖片翻轉的效果。