< p >CSS轉換(div)介紹< /p >
< p >CSS轉換是指通過CSS屬性和值的設置，可以改變元素的外觀、位置和尺寸。在CSS中，可以使用transform屬性來實現各種轉換效果。本文將介紹幾個常用的CSS轉換效果，并給出相應的代碼案例和詳細解釋。< /p >
< p >一、平移（Translate）< /p > < pre > .square { transform: translate(50px, 50px); } < /pre >
< p >使用translate函數可以實現平移效果。上述代碼將名為square的元素向右平移50像素，向下平移50像素。< /p >
< p >二、旋轉（Rotate）< /p > < pre > .circle { transform: rotate(45deg); } < /pre >
< p >使用rotate函數可以實現旋轉效果。上述代碼將名為circle的元素順時針旋轉45度。< /p >
< p >三、縮放（Scale）< /p > < pre > .rectangle { transform: scale(1.5); } < /pre >
< p >使用scale函數可以實現縮放效果。上述代碼將名為rectangle的元素放大1.5倍。< /p >
< p >四、傾斜（Skew）< /p > < pre > .triangle { transform: skew(30deg, -10deg); } < /pre >
< p >使用skew函數可以實現傾斜效果。上述代碼將名為triangle的元素水平傾斜30度，垂直傾斜-10度。< /p >
< p >五、變形原點（Transform Origin）< /p > < pre > .element { transform: translateX(50px); transform-origin: top left; } < /pre >
< p >使用transform-origin屬性可以改變元素的轉換原點，默認情況下，轉換的原點是元素的中心點。上述代碼將名為element的元素向右平移50像素，并將轉換的原點設置為左上角。< /p >
< p >六、組合轉換< /p >
< p >可以通過將多個轉換效果結合使用，實現更復雜的動畫效果。下面是一個應用了平移和旋轉效果的代碼案例：< /p >
< pre > .animated { transform: translate(50px, 50px) rotate(45deg); } < /pre >
< p >上述代碼將名為animated的元素向右平移50像素，向下平移50像素，并順時針旋轉45度。< /p >
< p >綜上所述，通過使用CSS轉換效果，可以輕松地改變元素的外觀和位置。在實際應用中，可以根據需求選擇適當的轉換效果，或者將多個轉換效果組合起來創建更復雜的動畫效果。< /p >