在進行網頁設計時，圖片旋轉是一個常見的需求，使用CSS可以輕松實現這個效果。但是，有時候我們需要控制旋轉的速度，從而達到更好的效果。那么，在CSS中，要如何控制圖片旋轉時間呢？下面就來詳細介紹。

在CSS中，圖片旋轉是通過transform屬性來實現的。使用該屬性，我們可以旋轉元素的角度。其中，rotate()函數就可以控制元素的旋轉。例如，使用下面的代碼可以使元素以90度為中心逆時針旋轉：

img {
transform: rotate(90deg);
}

但是，上述代碼只是旋轉了元素本身，并沒有控制旋轉的時間。要控制時間，可以使用CSS的transition屬性，該屬性可以讓元素在一段時間內過渡到新的樣式。例如，下面的代碼可以使圖片在1秒內完成旋轉：

img {
transition: transform 1s;
}
img:hover {
transform: rotate(90deg);
}

在上述代碼中，當鼠標懸停在圖片上時，就會觸發img:hover中的旋轉樣式。同時，使用transition屬性指定了要過渡的樣式為transform，并且持續時間為1秒。

如果需要更細致的控制，可以在transition屬性中指定transition-duration、transition-timing-function、transition-delay等屬性。例如，使用下面的代碼可以在0.5秒內完成旋轉，并且使用ease-in-out的緩動函數來平滑過渡：

img {
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
img:hover {
transform: rotate(90deg);
}

除此之外，還可以使用CSS的animation屬性來實現圖片旋轉。該屬性可以定義一個動畫序列，并指定每個序列的時間、緩動函數等。不過，相比于transition屬性，animation屬性更適合用于復雜的動畫效果。這里就不再贅述。

總之，使用CSS可以輕松實現圖片旋轉效果，并且還可以通過transition屬性來控制旋轉時間。在實際應用中，如果需要更豐富的效果，可以使用其他的CSS屬性或JavaScript來實現。