CSS是一種網頁開發的重要技術，它可以控制網頁中的元素的樣式和布局。其中一個有趣的功能是使盒子旋轉。下面我們來一起探討它的實現方法。

.box {
width: 100px;
height: 100px;
background-color: #ccc;
transition: transform 1s ease-in-out;
}
.box:hover {
transform: rotate(90deg);
}

在上面的代碼中，我們首先定義了一個名為“box”的樣式類，它設置了盒子的大小和背景顏色，并使用了CSS3中的“transition”屬性來添加旋轉過渡動畫。

當鼠標懸停在盒子上時，我們需要通過“:hover”選擇器來定義旋轉的效果。在這里，我們使用CSS3的“transform”屬性來旋轉盒子，并使用參數“rotate(90deg)”來指定旋轉的方向和角度。

需要注意的是，“transform”屬性可能不支持所有的瀏覽器。因此，我們需要添加一些瀏覽器兼容性前綴，例如“-webkit-transform”或“-moz-transform”，以確保該效果能夠在各種瀏覽器中顯示正確。

通過這種方法，我們就可以輕松地添加旋轉效果到盒子中了。當然，我們還可以通過設置其他參數來改變旋轉的速度、角度、方向等等。希望本文對你有所幫助。