CSS变换

本文介绍CSS样式中如何设置元素的变换（transform）效果，包括平移（translate）、缩放（scale）、旋转（rotate）、扭曲（skew）等。

变换会基于元素的原点（origin）操作，而元素默认原点位于元素的中心，修改原点位置使用transform-origin属性，可以使用center（默认值）、top、bottom、left、right关键字及它们的组合设置，也可以使用数值或百分数设置原点的水平和垂直方向坐标，如“50% 50%”也是表示元素的中心位置、“transform-origin:top left;”可以将元素的原点设置到左上角。

下面分别介绍各种变换效果。

平移（translate）

设置平移效果时在transform属性中使用如下函数：

translateX(x)，参数设置水平方向相对于原点平移距离。正数向右移动，负数向左移动。
translateY(y)，参数设置垂直方向相对于原点平移距离。正数向下移动，负数向上移动。
translate(x,y)，参数分别设置水平和垂直方向相对于原点的平移距离。

下面的代码演示了元素的平移。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #div1 {
            width:300px;
            height:200px;
            background-color:red;
            transform:translate(3em,1em);
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

代码中，div1元素默认应该显示在body元素的左上角，这里设置向右平移3个字符，向下平移1个字符，页面显示效果如下图所示。

平移

缩放（scale）

缩放元素时可以在transform属性中使用如下函数：

scaleX(x)，设置水平方向缩放比例，如0.5为原尺寸的一半，2为原尺寸的2倍。
scaleY(y)，设置垂直方向缩放比例。
scale(x,y)，设置水平和垂直方向缩放比例。

与平移不同，元素缩放时，原点在不同位置时的效果也不一样，如下面的代码会以元素中心为原点进行缩放。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #div1 {
            width:300px;
            height:200px;
            background-color:red;
            transform:scale(0.5,0.5);
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

页面显示效果如下图所示。

以中心为原点缩放

下面的代码，我们修改缩放的原点。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #div1 {
            width:300px;
            height:200px;
            background-color:red;
            transform-origin:left top;
            transform:scale(0.5,0.5);
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

代码中将div1元素的原点设置为左上角，缩放效果如下图所示。

以左上角为原点缩放

旋转（rotate）

实现元素的旋转时可以在transform属性中使用rotate()函数，其参数为旋转的角度，正数时顺时针旋转，负数时逆时针旋转，如30deg表示顺时针旋转30度。下面的代码演示了旋转样式的应用。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #div1 {
            width:300px;
            height:200px;
            background-color:red;
            transform-origin:bottom right;
            transform:rotate(-15deg);
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

本例，div1会以右下角为原点逆时针旋转15度，显示效果如下图所示。

逆时针旋转

扭曲（skew）

设置元素的扭曲效果可以在transform属性中使用如下函数：

skewX(angle)，指定水平方向扭曲的角度，正数为向右扭曲，负数为向左扭曲。
skewY(angle)，指定垂直方向扭曲的角度，正数为向下扭曲，负数为向上扭曲。
skew(x-angle,y-angle)，分别设置水平和垂直方向扭曲的角度。

下面的代码演示了扭曲的变换样式。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            width:100px;
            height:100px;
            background-color:red;
            margin-left:100px;
        }
    </style>
</head>
<body>
    <div id="div1" style="transform:skewX(30deg);"></div>
    <div id="div2" style="transform:skewX(-30deg);"></div>
</body>
</html>

为更好地显示扭曲效果，两个div元素都设置了100像素的左边距，页面显示效果如下图所示。

以中心为原点的水平扭曲