平移、旋转与缩放
在“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 里相关的函数，但由于进行较为复杂的转换时仍然得借助相关透视样式，因此通常只作为简单的转换变形使用。
微信扫码关注
抖音扫码关注