CSS控制圖片旋轉(zhuǎn)并固定其位置的方法

在CSS中，我們可以使用transform屬性來控制圖片的旋轉(zhuǎn)，如果我們想要讓圖片在旋轉(zhuǎn)之后保持不變，我們需要使用position屬性來固定圖片的位置，下面是一個(gè)示例代碼：

HTML代碼：

<div class="container">
  <img class="rotate-image" src="path/to/image.jpg" alt="Image">
</div>

CSS代碼：

.rotate-image {
  transform: rotate(45deg); /* 旋轉(zhuǎn)圖片45度 */
  position: relative; /* 固定圖片位置 */
}
.container {
  position: relative; /* 容器也設(shè)置為相對(duì)定位，以確保圖片在容器內(nèi)旋轉(zhuǎn) */
}

在這個(gè)示例中，我們首先將圖片旋轉(zhuǎn)45度，然后使用position: relative;來固定圖片的位置，這樣，圖片在旋轉(zhuǎn)之后就不會(huì)再移動(dòng)了，我們將容器也設(shè)置為相對(duì)定位，以確保圖片在容器內(nèi)旋轉(zhuǎn)，而不是隨著頁面的滾動(dòng)而移動(dòng)。

需要注意的是，這種方法只適用于CSS3支持的環(huán)境，如果你需要支持更老的瀏覽器版本，你可能需要使用JavaScript或者jQuery等JavaScript庫來實(shí)現(xiàn)圖片的旋轉(zhuǎn)和位置固定。