[快速入门前端 32] 进阶样式属性 (2)：文字样式和 2D Transform

文字空白及溢出样式

White Space

属性名：white-space (指定如何处理文字中的空白)
属性值：normal (预设)、pre (格式与文本完全相同)、nowrap (强制不换行)、pre-wrap (与文本相同，但若超出边界则自动换行)、pre-line (只保留文本中的换行格式)

属性值说明其他normal文字自动换行并将文本中的换行视为空白pre与文本格式相同，保留原文本中的空白和换行程式中的排版缩排空格也会被呈现，就算超出父元素範围也不换行pre-wrap与文本格式相同，但若超出父元素会自动换行pre-line只保留文本的换行，不保留空格nowrap强制不换行就算超出父元素範围也不换行

範例：

Text Overflow

属性名：text-overflow
属性值：clip (剪切)、ellipsis (省略号)

本属性是指定文字溢出时的显示方式，所以必须在 white-space: nowrap; 时作用 (否则文字会自动换行导致设定失效)该元素的 overflow 设定必须为非 visible 值 ( 也就是必须是 hidden、auto、或 scroll ) 否则溢出的文字还是会正常显示

範例：

div {    white-space: nowrap;}.box2 {    overflow: hidden;    text-overflow: clip;}.box3 {    overflow: hidden;    text-overflow: ellipsis;}

2D Transform

transform 属性可以修改元素的空间维度，也就是可以使该元素进行位移、旋转、缩放等，且以三维空间的概念分为 2d transform 和 3d transform，这边我们就先来介绍 2d transform 的相关用法吧。

transform 属性不能作用于 inline 元素

Translate 位移

可以使用 translateX 或 translateY 对元素进行单方向位移，也可以使用 translate 进行一个或多个方向位移。

语法：

/* 只对某一个方向做位移 */transform: translateX(50px); /* 向右位移 50px */transform: translateY(50px); /* 向下位移 50px */transform: translate(50px); /* 向右位移 50px (不指定位移方向则预设为 x 轴) *//* 同时对两个方向进行位移 */transform: translateX(50px) translateY(50px); /* 向右 50px，向下 50px */transform: translate(50px, 50px); /* 向右 50px，向下 50px */

可以改变元素的位置，对元素进行位移 (类似相对定位)不脱离布局流、不影响周围元素的位置对行内元素无效配合定位可以达到置中的效果位移的百分比参考为元素本身

範例：将 div 在画面中置中
假设我们要将一个未知宽高的元素置中，我们可能会设定 position: absolute，并且将 top 和 left 都设为 50%，但这时结果却如下图，元素明显没有置中。

这是因为在定位中，元素的参考点为左上角而非中心点，所以若要让元素视觉上置中的话需要将元素分别往上、往左移动自身的一半距离，使粉红正方形的中心点来到红色十字交叉的位置就可以达到画面置中的效果。

所以当我们加入 translate 使元素位移后，元素就自然而然的在画面正中央啦。

div {    width: 400px;    height: 200px;    background-color: lightpink;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%); /* 使元素向上位移一半高度，向左位移一半宽度 */}

Scale 缩放

可以使用 scaleX() 或 scaleY() 对元素进行单方向缩放，也可以使用 scale() 进行多方向缩放，与 translate 不同的是若括弧内只写一项时，XY 轴都会缩放。

语法：

/* 只对某一个方向做缩放 */transform: scaleX(1.5); /* 横向拉宽 1.5 倍 */transform: scaleY(0.5); /* 直向缩小 0.5 倍 *//* 同时对两个方向进行缩放 */transform: scale(2); /* 横向直向皆放大 2 倍 */transform: scaleX(1.5) scaleY(2); /* 横向拉宽 1.5 倍，直向拉大 2 倍*/

scale 可以为负，若将 scaleX 设为 -1，如 scaleX(-1) 则水平方向会相反，呈现翻转效果

Rotate 旋转

rotate 顾名思义，就是可以让元素以中心点为圆心进行旋转，单位为 deg (角度)

语法：

transform: rotate(30deg); /* 旋转 30 度 */

Skew 倾斜

分为 X 轴和 Y 轴的倾斜，写法为 skewX(角度) 及 skewY(角度)，也可以写在一起成为 skew(x轴角度, y 轴角度)，若只有写一个角度则默认为 X 轴。

语法：

transform: skewX(30deg); /* X 轴倾斜 30 度 */transform: skewY(30deg); /* Y 轴倾斜 30 度 */transform: skew(30deg, 60deg); /*  X 轴倾斜 30 度、Y 轴倾斜 60 度 */transform: skew(30deg); /* X 轴倾斜 30 度 */

範例：

多种变形

transform 是个複合属性，也就是说可以对同个元素同时进行位移、缩放、选转、倾斜等一系列动作，不过后面的变形会受到前面的 CSS 设定后的影响。例如在旋转后，元素的 XY 轴发生改变，会导致位移时的方向与未旋转时不同。

範例：

.box {    width: 200px;    height: 200px;    background-color: lightpink;    transform: translate(100px); /* 单纯位移 */}.box2 {    width: 200px;    height: 200px;    background-color: lightblue;    transform: rotate(30deg) translate(100px); /* 按照撰写顺序先旋转后位移 */}

Transform Origin 原点

属性名：transform-origin
最后我们来介绍一个概念 —— 原点 (参考点)，在之前相对位置 (relative) 时我们有讲过在位置定位时，元素会以左上角为原点，而 transform 这个属性预设的原点则是元素的中心点，而元素的变形都会以中心点为参考，例如旋转时会以中心点为圆心、倾斜时也以中心点为中心。

原点位置预设为元素的中心点 (x 轴 50%、y 轴 50%)原点的改变对 translate (位移) 没有影响 (因为位移不影响元素的大小或形状)transform-origin 有多种指定方法，若有两个值，则第一个为 x 轴，第二个为 y 轴若只有一个长度单位值，则表示 x 轴位置，y 轴取预设值 (中心)

语法：

transform-origin: bottom right; /* 以元素右下角顶点为原点 */transform-origin: 200px; /* 以元素 X 轴 200px 和 Y 轴中间的位置为原点 */transform-origin: 180px 200px; /* 以元素 X 轴 180px 和 Y 轴 200px 的位置为原点 */

範例：

不同原点对于 transform: rotate(50deg); 旋转 50 度的显示效果
不同原点对于 transform: scale(0.7); 缩小的显示效果

---

上一篇：[快速入门前端 31] 进阶样式属性 (1)：Shadow 阴影和 Opacity 不透明度
下一篇：[快速入门前端 33] 进阶样式属性 (3)：3D Transform 和 Transition 转场效果
系列文章列表：[快速入门前端] 系列文章索引列表