CSS3(6) 变形处理

在css3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。

一、缩放

使用scale方法实现文字或图像的缩放处理，在参数中指定缩放倍率。

div {
    /* 缩小50% */
    transform: scale(.5);
}

可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。

div {
    /* 水平方向缩小50%，垂直方向放大一倍 */
    transform: scale(.5, 2);
}

---

二、倾斜

使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

div {
    /* 水平方向倾斜30度，垂直方向倾斜30度 */
    transform: skew(30deg, 30deg);
}

skew方法中的两个参数可以修改成只使用一个参数，省略另一个参数——这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。

div {
    /* 水平方向倾斜30度，垂直方向不倾斜 */
    transform: skew(30deg);
}

---

三、移动

使用translate方法来将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

div {
    /* 水平方向上移动50px，垂直方向上移动50px */
    transform: translate(50px, 50px);
}

translate方法中的两个参数可以修改成只使用一个参数，省略另一个参数——这种情况下视为只在水平方向上移动，垂直方向上不移动。

div {
    /* 水平方向上移动50px，垂直方向不移动 */
    transform: translate(50px);
}

---

四、指定变形的基准点

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

指定transform-origin属性值的时候，采用“基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置”的方法，其中“基准点在元素水平方向上的位置”中可以指定的值为left、center、right，“基准点在元素垂直方向上的位置”中可以指定的值为top、center、bottom。

---

参考文献

1. 《HTML5与CSS3权威指南》