CSS是前端開發(fā)中不可或缺的工具，其中一個功能就是能夠對圖片進行各種各樣的變換，今天我們就來講一講如何使用CSS做到圖片的旋轉加放大效果。

首先，我們需要先在HTML中添加一張需要變換的圖片：

<div class="image">
<img src="example.jpg" alt="example" />
</div>

接下來，在CSS中添加以下代碼：

.image {
width: 200px; /* 設置圖片容器的寬度 */
height: 200px; /* 設置圖片容器的高度 */
position: relative; /* 設置圖片容器為相對定位 */
overflow: hidden; /* 隱藏超出容器部分的內容 */
}
.image img {
position: absolute; /* 將圖片設為絕對定位，以便旋轉和放大 */
top: 0;
left: 0;
width: 100%; /* 設置圖片寬度為圖片容器的100% */
height: 100%; /* 設置圖片高度為圖片容器的100% */
transform-origin: center center; /* 設置旋轉的中心點為圖片容器的中心 */
transition: all 0.5s ease; /* 添加過渡效果，使變換更加平滑 */
}
.image:hover img {
transform: rotate(360deg) scale(1.2); /* 鼠標懸停時對圖片進行旋轉和放大 */
}

這里的關鍵在于使用`transform`屬性來對圖片進行旋轉和放大。我們將圖片設為絕對定位，并將寬度和高度都設為100%，這樣才能使圖片按照容器的大小進行縮放。`transform-origin`屬性用來設置旋轉的中心點，這里設置為圖片容器的中心。最后，我們使用:hover選擇器來對鼠標懸停時的樣式進行設定，使用`rotate`函數來進行旋轉，使用`scale`函數來進行放大。

這就是如何使用CSS實現圖片的旋轉加放大效果，希望對大家有所幫助！