CSS Transform Text

一、Transform是什麼？

CSS Transform（變換）是CSS3中的一個新特性，能夠對元素進行旋轉、縮放、偏移、傾斜等等操作，讓平凡無奇的頁面變得更加生動。Transform屬性是一種2D或3D變換方法，它是一種全新的呈現（Rendering）方式，它通過一些特殊效應的方式，對圖像進行放大、縮小、平移、旋轉、扭曲等操作，從而實際上獲取一些視覺上的反饋。在CSS(HTML電子樣式表)使用過程中，transform能更加方便我們的控制，同時也讓頁面的交互更加有趣，功能更加強大。

二、Transform屬性的基本應用

Transform屬性具體包含有旋轉、縮放、平移、傾斜，下面將分別進行介紹：

1、旋轉：transform:rotate(45deg);該CSS屬性中rotate就是旋轉的函數，參數中的45deg表示旋轉的角度，後綴deg表示單位，deg是degrees（度）的縮寫。

.rotate {
    transform: rotate(45deg);
}

2、縮放：transform:scale(0.5);該CSS屬性中scale就是縮放的函數，參數中的小數（如0.5）表示縮放的比例，即原來的0.5倍。

.scale {
    transform: scale(0.5);
}

3、平移：transform:translate(x,y);該CSS屬性中translate就是平移的函數，參數中的x和y表示偏移距離，正數向右和下移動，負數相反。

.translate {
    transform: translate(50px, 100px);
}

4、傾斜：transform:skew(x,y);該CSS屬性中skew就是傾斜的函數，參數中的x和y分別表示水平和垂直方向傾斜的角度。

.skew {
    transform: skew(30deg, 20deg);
} 

三、Transform的聯合應用

當然，CSS Transform也支持聯合應用，例如同時使用旋轉和縮放：

.rotate-scale {
    transform: rotate(45deg) scale(0.5);
}

或者同時使用平移和傾斜，該怎樣設置？試想一下，我們需要在水平方向上偏移50px，垂直方向上偏移100px，同時水平方向上傾斜30度，垂直方向上傾斜20度，代碼如下：

.translate-skew {
    transform: translate(50px, 100px) skew(30deg, 20deg);
}

四、Transform的3D效果

CSS Transform還支持3D效果，例如通過rotateX，rotateY，rotateZ旋轉，通過translateX，translateY，translateZ平移，通過scaleX，scaleY，scaleZ縮放。

為了使讀者更好地理解，我們以旋轉3D效果舉例，下面是一個3D立方體的CSS代碼，你可以在瀏覽器中打開頁面查看效果：

/* 建立3D場景 */
.container {
    position: relative;
    perspective: 1000px;
    margin: 100px auto;
    width: 200px;
    height: 200px;
}
/* 六面體組樣式 */
.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d; /* 變換方式 */
}
/* 六個面的樣式 */
.cube .face {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.9;
}
/* 六個面的旋轉設計 */
.back  { transform: rotateY( 180deg) translateZ(100px); }
.bottom{ transform: rotateX( -90deg) translateZ(100px); }
.front { transform: rotateY(    0deg) translateZ(100px); }
.left  { transform: rotateY( -90deg) translateZ(100px); }
.right { transform: rotateY(  90deg) translateZ(100px); }
.top   { transform: rotateX(  90deg) translateZ(100px); }

五、Transform的兼容性

CSS Transform是CSS3中的新特性，因此在多年前的低版本瀏覽器中並不支持Transform，例如Internet Explore 8（IE8）以及IE8以下版本會不支持。

然而，現代瀏覽器（如Google Chrome，FireFox，Safari，Opera等）基本上都支持Transform，因此在現在的前端開發過程中，我們可以放心大膽地使用Transform，而不需要考慮瀏覽器兼容性問題。

六、總結

本文詳細介紹了CSS Transform的用法，包括四種基本應用（旋轉、縮放、平移、傾斜），聯合應用和3D效果，最後提及了Transform的兼容性。

CSS Transform的功能強大，使前端開發更加有趣，讓網頁更加生動。更多CSS相關知識可參考本站其他相關文章。