在CSS中，我們可以通過transform屬性來實(shí)現(xiàn)旋轉(zhuǎn)效果。當(dāng)我們指定一個(gè)元素旋轉(zhuǎn)一定的角度后，它將會(huì)按照指定的角度旋轉(zhuǎn)。但是，一旦動(dòng)畫結(jié)束，元素將會(huì)自動(dòng)返回到原來的位置，而不是停留在旋轉(zhuǎn)的位置。

.rotate {
transform: rotate(45deg);
transition: transform 1s ease-in-out;
}
.rotate:hover {
transform: rotate(135deg);
}

上面的代碼演示了如何在:hover偽類中設(shè)置元素旋轉(zhuǎn)45度，在懸停時(shí)將其旋轉(zhuǎn)另外的90度。然而，當(dāng)動(dòng)畫結(jié)束時(shí)，元素將會(huì)自動(dòng)轉(zhuǎn)回原位置。

要實(shí)現(xiàn)元素停留在旋轉(zhuǎn)后的位置，我們需要使用CSS動(dòng)畫的關(guān)鍵幀。下面的示例演示了如何實(shí)現(xiàn)將元素旋轉(zhuǎn)45度并將其保持在該位置的動(dòng)畫。

.rotate {
animation: rotate-45 1s ease-in-out forwards;
}
@keyframes rotate-45 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(45deg);
}
}

我們使用@keyframes創(chuàng)建了一個(gè)名為rotate-45的關(guān)鍵幀集合。在0%的時(shí)間點(diǎn)，元素未發(fā)生旋轉(zhuǎn)，因此transform屬性的值為rotate(0)。在100%的時(shí)間點(diǎn)，元素旋轉(zhuǎn)45度，transform屬性的值為rotate(45deg)。此后，我們使用動(dòng)畫屬性將元素應(yīng)用于rotate-45動(dòng)畫并使用動(dòng)畫執(zhí)行選項(xiàng)forwards來確保元素在動(dòng)畫結(jié)束時(shí)保持在旋轉(zhuǎn)的位置。

所以，這就是如何在CSS中完成旋轉(zhuǎn)后保持在旋轉(zhuǎn)后位置的簡單方法。我們可以使用CSS動(dòng)畫的關(guān)鍵幀來實(shí)現(xiàn)這個(gè)效果，無需使用任何JavaScript代碼。