CSS旋轉圖片和彈出文字可以讓你的網站更具動感和趣味性。下面我們就來一起學習如何實現。

.rotate-image {
display: inline-block;
position: relative;
cursor: pointer;
}
.rotate-image img {
transform-origin: center center;
transition: transform 0.5s;
}
.rotate-image:hover img {
transform: rotate(360deg);
}
.rotate-image:hover .image-text {
opacity: 1;
transform: translateY(0);
}
.image-text {
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s, transform 0.5s;
}

首先，我們給圖片添加一個class名為"rotate-image"，并將其包裹在一個相對定位的父元素中，用以控制文字出現的位置。然后，我們為圖片添加了hover的效果，讓它在鼠標移上去時旋轉360度。

接著，我們為圖片添加了一個絕對定位的子元素，用以顯示文字。我們給該子元素添加了一個class名為"image-text"。我們將此元素放置在圖片的底部，并設置了一個向上的transform。我們給該元素加上了hover的效果，讓它在圖片旋轉時于圖片下方出現，并慢慢變得不透明。

通過這樣的方式，我們可以輕松實現圖片旋轉并彈出文字的效果。