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

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

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

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

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

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

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