詳解div旋轉

一、div旋轉 定位

在進行div旋轉之前，首先需要對div對象進行定位。可以使用position屬性為其進行定位，如下所示：

    <div style="position:absolute; top:50%; left:50%; transform:rotate(45deg);">
        <p>我是旋轉後的div</p>
    </div>

在上面的代碼中，通過設置position為absolute，將div對象進行了相對於父元素的絕對定位。同時，通過設置top和left為50%，將div對象放置在父元素的中心位置。最後，通過設置transform為rotate(45deg)，將div對象進行了45度的旋轉。

這樣，我們就可以通過對div對象的定位並進行旋轉的方式實現旋轉效果。

二、div旋轉後保持位置

在有些情況下，我們需要對div對象進行旋轉，但是要求旋轉後div對象的位置不能發生變化。在這種情況下，我們可以使用transform-origin屬性來實現。

transform-origin屬性用於設置旋轉的原點，其參數可以是具體的像素值，也可以是相對於元素自身的百分比值。如下所示：

    <div style="transform: rotate(45deg); transform-origin: 50% 50%;">
        <p>我是旋轉後的div</p>
    </div>

在上面的代碼中，通過設置transform-origin為50% 50%，即將旋轉的中心點設置為div對象的中心，使得旋轉後div對象的位置不變。

三、div旋轉動畫

除了可以通過設置transform屬性進行div對象的旋轉，還可以使用CSS3的動畫效果實現div旋轉動畫。可以通過在CSS樣式中設置@keyframes來定義動畫，如下所示：

    <style>
        @keyframes myrotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .mydiv {
            animation-name: myrotate;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
    </style>
    <div class="mydiv">
        <p>我是旋轉動畫效果的div</p>
    </div>

在上面的代碼中，定義了名為myrotate的動畫，其通過0%到100%的過渡，使得div對象從0度到360度旋轉。然後，通過設置animation-name為myrotate，將該動畫應用到class為mydiv的div對象中。

最後，通過設置animation-duration為2s，使得動畫的周期為2秒。通過設置animation-iteration-count為infinite，使得動畫循環無限次數，從而實現div旋轉動畫效果。

四、div旋轉代碼

對於div對象的旋轉，常見的代碼如下所示：

    <div style="transform: rotate(45deg);">
        <p>我是旋轉後的div</p>
    </div>

其中，通過設置transform為rotate(45deg)，將div對象進行了45度的旋轉。

五、div旋轉45度

將div對象旋轉45度，其代碼如下所示：

    <div style="transform: rotate(45deg);">
        <p>我是旋轉45度後的div</p>
    </div>

六、div旋轉180度

將div對象旋轉180度，其代碼如下所示：

    <div style="transform: rotate(180deg);">
        <p>我是旋轉180度後的div</p>
    </div>

七、div旋轉90度怎麼寫

將div對象旋轉90度，其代碼如下所示：

    <div style="transform: rotate(90deg);">
        <p>我是旋轉90度後的div</p>
    </div>

八、div旋轉90度且寬高不變

將div對象旋轉90度，同時保持寬高不變，其代碼如下所示：

    <div style="transform: rotate(90deg) scale(1, 1.34); width: 100px; height: 75px; background-color: red;">
        <p>我是旋轉90度且寬高不變的div</p>
    </div>

在上面的代碼中，通過設置scale(1, 1.34)可以使得div對象在旋轉90度的同時保持寬高不變。

九、div旋轉之後背景圖片不旋轉

有些情況下，我們需要將div對象進行旋轉，但是不希望其中的背景圖片跟隨旋轉。在這種情況下，我們可以設置背景圖片為background-image，並將其設置為absolute定位，如下所示：

    <div style="position: relative; width: 200px; height: 200px; transform: rotate(45deg);">
        <div style="position: absolute; width: 100%; height: 100%; background-image: url('myimage.jpg'); transform: rotate(-45deg);"></div>
        <p>我是旋轉後的div</p>
    </div>

在上面的代碼中，我們使用了兩個div對象。其中，外層的div對象進行了旋轉，並設置了position為relative。內層的div對象則設置了position為absolute，並將背景圖片設置為background-image。這樣，內層div對象跟隨外層div對象進行旋轉，但是其背景圖片不會隨之旋轉，從而實現了背景圖片不旋轉的效果。

十、用CSS實現div旋轉

最常見的實現div旋轉的方式就是使用CSS中的transform屬性。其使用方式如下所示：

    <div style="transform: rotate(45deg);">
        <p>我是旋轉後的div</p>
    </div>

除了使用transform屬性外，我們還可以使用CSS3中的動畫效果來實現div旋轉動畫。其實現方式如下所示：

    <style>
        @keyframes myrotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .mydiv {
            animation-name: myrotate;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
    </style>
    <div class="mydiv">
        <p>我是旋轉動畫效果的div</p>
    </div>

通過使用transform和CSS3動畫效果，我們可以很方便地實現div旋轉的效果和動畫效果。