CSS 平移、旋轉、縮放 ( translate、rotate、scale )
在「transform 轉換函式」教學裡有介紹與變形相關的轉換函式，然而 CSS 有提供三個轉換專用的「樣式屬性」，可以處理基本的 平移 translate、旋轉 rotate 和 尺寸縮放 scale，這篇教學會介紹相關的用法。
延伸閱讀：transform 轉換函式
快速導覽：
CSS 的座標系統
CSS 的平移、旋轉、縮放樣式屬性和 transform 相同，都是混用「笛卡爾座標系統」以及「球面座標系統」兩種座標系統，參考下圖，如果要將元素平移，會參考由 XYZ 三軸所組成笛卡爾座標系統 ( 黑色線 )，如果使用球面座標系統 ( 紅色線 )，則會讓元素繞著三個軸進行旋轉。
下圖使用四個 div 簡單展示兩種坐標系統。
translate 平移
translate 樣式屬性可以設定「平移的轉換效果」，沒有繼承特性，具有「x y z」三個軸向「長度單位」的屬性值，使用方式也可使用 transform 寫法代替，，相關寫法如下：
div {
translate: 50px;
/* 等同 transform: translate(50px, 0)*/
/* 等同 transform: translateX(50px)*/
/* 等同 transform: translate3d(50px, 0, 0)*/
translate: 0 50px;
/* 等同 transform: translate(0, 50px)*/
/* 等同 transform: translateY(50px)*/
/* 等同 transform: translate3d(0, 50px, 0)*/
translate: 0 50px 50px;
/* 等同 transform: translateY(50px) translateZ(50px)*/
/* 等同 transform: translate3d(0, 50px, 50px)*/
}
下方範例使用四種寫法呈現完全相同的平移效果。
<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<!-- CSS 程式碼 -->
<style>
div {
margin: 10px;
z-index: 1;
width: 100px;
height: 100px;
border: 1px solid #000;
background: linear-gradient(to left, red, yellow);
}
.a {translate: 50px;}
.b {transform: translate(50px, 0);}
.c {transform: translateX(50px);}
.d {transform: translate3d(50px, 0, 0);}
</style>
如果要使用 translate 製作具有「透視」的效果，則必須搭配轉換與透視相關的樣式屬性，下方範例將三個 div 分別進行 Z 方向的平移，如果沒有使用透視相關樣式屬性，看到的結果會同等大小且位置重疊，但如果有搭配透視，就會呈現具有前後遠近的放大縮小效果。
<!-- HTML 程式碼 -->
<div class="camera c1">
<div class="a">apple</div>
<div class="b">banana</div>
<div class="c">oxxo</div>
</div>
<div class="camera c2">
<div class="a">apple</div>
<div class="b">banana</div>
<div class="c">oxxo</div>
</div>
<!-- CSS 程式碼 -->
<style>
div {
position: relative;
margin: 50px;
z-index: 1;
width: 100px;
height: 100px;
border: 1px solid #000;
}
.c1 {
perspective: 80px;
perspective-origin: -20% 50%;
}
.camera div {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.a {
background: #f55b;
translate:0 0 30px;
}
.b {
background: #09fb;
translate:0 0 0;
}
.c {
background: #0a0b;
translate:0 0 -100px;
}
</style>
rotate 旋轉
rotate 樣式屬性可以設定「旋轉的轉換效果」，沒有繼承特性，具有「x y z」三個軸向「角度單位」的屬性值，使用方式也可使用 transform 寫法代替，，相關寫法如下：
參考：rotate() 旋轉
div {
rotate: 30deg;
/* 等同 rotate: z 30deg */
/* 等同 transform: rotate(30deg) */
/* 等同 transform: rotateZ(30deg) */
/* 等同 transform: rotate3d(0, 0, 1, 30deg) */
rotate: x 30deg;
/* 等同 transform: rotateX(30deg) */
/* 等同 transform: rotate3d(1, 0, 0, 30deg) */
rotate: y 30deg;
/* 等同 transform: rotateY(30deg) */
/* 等同 transform: rotate3d(0, 1, 0, 30deg) */
rotate: 0 0 1 30deg;
/* 等同 rotate: 30deg */
/* 等同 rotate: z 30deg */
/* 等同 transform: rotate(30deg) */
/* 等同 transform: rotateZ(30deg) */
/* 等同 transform: rotate3d(0, 0, 1, 30deg) */
}
下方範例使用六種寫法呈現完全相同的旋轉效果。
<!-- HTML 程式碼 -->
<div class="a">.a</div>
<div class="b">.b</div>
<div class="c">.c</div>
<div class="d">.d</div>
<div class="e">.e</div>
<div class="f">.f</div>
<!-- CSS 程式碼 -->
<style>
div {
margin: 20px;
width: 100px;
height: 100px;
border: 1px solid #000;
background: linear-gradient(to left, red, yellow);
float: left;
line-height: 100px;
text-align: center;
font-size: 30px;
}
.a {rotate: 50deg;}
.b {rotate: z 50deg;}
.c {rotate: 0 0 1 50deg;}
.d {transform: rotate(50deg);}
.e {transform: rotateZ(50deg);}
.f {transform: rotate3d(0, 0, 1, 50deg);}
</style>
如果要使用 rotate 製作具有「透視」的效果，則必須搭配轉換與透視相關的樣式屬性，下方範例將三個 div 分別進行 Z 方向的平移，如果沒有使用透視相關樣式屬性，看到的結果會同等大小且位置重疊，但如果有搭配透視相關樣式屬性，就會呈現具有前後遠近的放大縮小效果。
<!-- HTML 程式碼 -->
<div class="camera c1">
<div class="space">
<div class="a">apple</div>
<div class="b">banana</div>
<div class="c">oxxo</div>
</div>
</div>
<div class="camera c2">
<div class="a">apple</div>
<div class="b">banana</div>
<div class="c">oxxo</div>
</div>
<!-- CSS 程式碼 -->
<style>
div {
position: relative;
margin: 50px;
z-index: 1;
width: 100px;
height: 100px;
border: 1px solid #000;
}
.c1 {
perspective: 80px;
perspective-origin: -20% 50%;
}
.space {
transform-style: preserve-3d; /* 讓子元素位於同一個 3D 空間 */
}
.camera div {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.a {
background: #f55b;
rotate: x 30deg;
}
.b {
background: #09fb;
rotate: y 30deg;
}
.c {
background: #0a0b;
rotate: z 30deg;
}
</style>
scale 尺寸縮放
scale 樣式屬性可以設定「尺寸縮放的轉換效果」，沒有繼承特性，具有「x y z」三個軸向「無單位數字」或「百分比」的屬性值代表縮放比例，使用方式也可使用 transform 寫法代替，，相關寫法如下：
參考：scale() 尺寸縮放
div {
scale: 1.5;
/* 等同 transform: scale(1.5)*/
/* 等同 transform: scaleX(1.5) scaleY(1.5)*/
/* 等同 transform: scale3d(1.5, 1.5, 1)*/
scale: 0.8 1.5;
/* 等同 translate(0, 50px)*/
/* 等同 transform: scaleX(0.8) scaleY(1.5)*/
/* 等同 transform: scale3d(0.8, 1.5, 1)*/
translate: 0.8 1.5 2;
/* 等同 transform: scaleX(0.8) scaleY(1.5) scaleZ(2)*/
/* 等同 transform: scale3d(0.8, 1.5, 2)*/
}
下方範例使用不同的寫法但呈現完全相同的縮放效果。
<!-- HTML 程式碼 -->
<div class="a">.a</div>
<div class="b">.b</div>
<div class="c">.c</div>
<div class="d">.d</div>
<div class="e">.e</div>
<div class="f">.f</div>
<!-- CSS 程式碼 -->
<style>
div {
margin: 30px;
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
line-height: 100px;
text-align: center;
font-size: 30px;
}
.a, .b {background: #f55;}
.c, .d {background: #0bf;}
.e, .f {background: #0c0;}
.a {scale: 1.5;}
.b {transform: scale(1.5);}
.c {scale: 0.8 1.5;}
.d {transform: scaleX(0.8) scaleY(1.5);}
.e {scale: 0.8 1.5 2;}
.f {transform: scale3d(0.8, 1.5, 2);}
</style>
小結
平移、旋轉、縮放 ( translate、rotate、scale ) 這三個樣式屬性的用法幾乎等同 transform 裡相關的函式，但由於進行較為複雜的轉換時仍然得藉助相關透視樣式，因此通常只作為簡單的轉換變形使用。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～