Skip to content

变形处理

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

只能转换由盒模型定位的元素。根据经验，如果元素具有 display:block，则由盒模型定位元素

基础知识

旋转

1
transform: rotate(45deg);

上面的样式代码可以使一个元素顺时针旋转 45 度

deg 是 CSS3 的 "Values and Units" 模块中定义的一个角度单位

缩放

使用 scale 方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。譬如 scale(0.5) 表示缩小一半

1
transform: scale(0.5);

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

1
transform: scale(0.5, 2);

上面的代码使得水平方向缩小一半，垂直方向放大一倍

倾斜

skew(30deg, 30deg) 表示水平方向上倾斜 30 度，垂直方向上倾斜 30 度

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

移动

例如 translate(50px, 50px) 表示水平方向上从左往右移动 50px，垂直方向上从上往下移动 50px

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

对一个元素使用多种变形

对一个元素先移动，然后旋转，最后缩放的示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>对元素使用多重变形示例</title>
    <style>
        div {
            width: 300px;
            background-color: yellow;
            text-align: center;
            transform: translate(150px, 200px) rotate(45deg) scale(1.5);
        }
    </style>
</head>
<body>
    <div>示例文字</div>
</body>
</html>

对一个元素先旋转，然后缩放，最后移动的示例；

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>对元素使用多重变形示例</title>
    <style>
        div {
            width: 300px;
            background-color: yellow;
            text-align: center;
            transform: rotate(45deg) scale(1.5) translate(150px, 200px);
        }
    </style>
</head>
<body>
    <div>示例文字</div>
</body>
</html>

这两个示例都是对同一个页面中的同一个元素进行多重变形的示例，而且各种变形方法中所使用的参数也都相同，旋转时都是顺时针旋转 45 度，缩放时都是将元素放大 1.5 倍，移动时都是向右移动 150px，向下移动 200px--两个示例的差别只是在使用 3 种变形方法的先后顺序不一样而已

从运行结果可以看出，元素在页面上所处位置并不相同

指定变形的基准点

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>不改变变形的基准点</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            display: inline-block;
        }
        div#a {
            background-color: pink;
        }
        div#b {
            background-color: green;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>
</html>