最近在學(xué)習(xí)css時(shí)，發(fā)現(xiàn)了一個(gè)很有趣的鼠標(biāo)移動(dòng)變換圖片的效果，想和大家分享。

實(shí)現(xiàn)這個(gè)效果的核心就是利用了css中的:hover偽類和transform屬性，同時(shí)結(jié)合了一些css動(dòng)畫(huà)的技巧。

首先，需要在html中添加圖片元素，并給圖片添加一個(gè)唯一的id屬性：

<img id="img1" src="圖片路徑">

然后，在css中為圖片添加樣式：

#img1 {
width: 300px;
height: 200px;
transition: transform 0.5s ease;
transform-style: preserve-3d;
}

這里需要注意的是，transition屬性是用來(lái)控制鼠標(biāo)移動(dòng)時(shí)圖片變換的速度和方式，transform-style屬性用來(lái)設(shè)置3D場(chǎng)景中元素的變換方式。

接下來(lái)，為圖片添加鼠標(biāo)移動(dòng)事件：

#img1:hover{
transform: rotateY(180deg);
}

這里的鼠標(biāo)移動(dòng)事件就是:hover，并設(shè)置了一個(gè)transform屬性，用來(lái)控制圖片的旋轉(zhuǎn)方向和角度。

好了，現(xiàn)在打開(kāi)頁(yè)面，鼠標(biāo)移動(dòng)到圖片上時(shí)，圖片就會(huì)以Y軸為軸心，180度旋轉(zhuǎn)，變換成背面的圖片。

如果想要讓變換更加平滑，可以在css中添加一些過(guò)渡效果：

#img1 {
width: 300px;
height: 200px;
transition: transform 0.5s ease;
transform-style: preserve-3d;
transform-origin: center center; 
}
#img1:hover{
transform: rotateY(180deg);
box-shadow: 0px 0px 5px #888;
}

這里的box-shadow屬性可以在圖片旋轉(zhuǎn)時(shí)添加一些陰影效果，讓變換更加生動(dòng)。

總結(jié)來(lái)說(shuō)，鼠標(biāo)移動(dòng)變換圖片的效果就是利用:hover和transform屬性，通過(guò)改變圖片的角度、位置或大小，實(shí)現(xiàn)了一種炫酷的效果。