CSS旋轉過渡效果

一、CSS旋轉過渡基礎

CSS旋轉過渡效果是一種視覺效果，它通過CSS3的transform屬性來實現。transform屬性可以進行旋轉、縮放、平移等操作。其中，旋轉操作可以通過rotate()函數來完成。該函數接受一個角度作為參數，單位可以是度（deg）、弧度（rad）或者梯度（grad）。

    <div class="box">
      <p>Hello World</p>
    </div>
    
    .box {
      width: 200px;
      height: 200px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 1s;
    }

    .box:hover {
      transform: rotate(180deg);
    }

上面的代碼實現了一個簡單的旋轉效果。當鼠標懸停在box元素上時，它將會在1秒鐘內旋轉180度。

二、通過CSS關鍵幀動畫實現旋轉過渡效果

除了使用CSS屬性transition來實現 CSS 過渡效果之外，還可以通過 CSS 關鍵幀動畫來實現旋轉過渡效果。

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      animation-name: spin;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

上面的代碼中，我們定義了一個名為spin的關鍵幀動畫。在0%時，元素的旋轉角度為0度，在100%時旋轉角度為360度，這樣就可以實現完整的旋轉動畫。然後我們將動畫應用到.box元素上的animation-name，設置動畫時長為1秒，動畫時間函數為linear，動畫循環播放無限次。

三、通過CSS變量實現更靈活的旋轉過渡效果

為了讓 CSS 過渡效果更加靈活，我們可以使用 CSS 變量來定義旋轉角度。

    :root {
      --angle: 0deg;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(var(--angle));
      transition: transform 1s;
    }

    .box:hover {
      --angle: 180deg;
    }

上面的代碼中，我們定義了一個名為 –angle 的 CSS 變量，初始值為 0deg。然後我們將這個變量應用到 .box 元素的 transform 屬性中的 rotate() 函數中。當鼠標懸停在.box元素上時，我們通過設置 –angle 變量的值為 180deg，讓元素完成一個旋轉過渡效果。

四、通過CSS transform-origin屬性實現旋轉中心點設置

CSS transform-origin 屬性可以用來設置元素變換（例如：旋轉、縮放、傾斜或平移）的起點。默認情況下，變換起點為元素的中心點。但是通過transform-origin屬性可以實現旋轉中心點的任意設置。

    .box {
      width: 200px;
      height: 200px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(var(--angle));
      transform-origin: top left;
      transition: transform 1s;
    }

    .box:hover {
      --angle: 180deg;
    }

上面的代碼中，我們通過設置transform-origin屬性的值，將旋轉中心點從默認的中心點移動到了左上角。

五、通過CSS filter屬性實現圖片旋轉效果

除了可以對元素進行旋轉之外，我們還可以使用filter屬性對圖片進行旋轉。

    <img src="image.jpg" alt="image" class="img">

    .img {
      filter: grayscale(100%) hue-rotate(var(--angle));
      transition: filter 1s;
    }

    .img:hover {
      --angle: 180deg;
    }

上面的代碼中，我們通過設置filter屬性的值，將進行圖片的灰度處理和色相旋轉。當鼠標懸停在圖片上時，我們通過設置–angle變量的值為180deg，實現了一個圖片旋轉效果。

六、總結

通過本文的學習，我們了解了如何使用CSS實現旋轉過渡效果。不僅可以通過transition屬性來實現元素的旋轉過渡，還可以通過CSS關鍵幀動畫來實現更加靈活的效果。而通過使用CSS變量和transform-origin屬性，我們可以讓旋轉效果更加的精準。另外，我們還學習到了如何通過CSS filter屬性實現圖片旋轉效果。