首页 > 前端 > CSS3 之 Transform

CSS3 之 Transform

Transform 字面意思就是变形，在 CSS3 中 transform 的变形主要有 rotate（旋转）、skew（扭曲）、scale（缩放）、translate（移动）和 matrix（矩阵）。

transform的语法：

transform: none | translate | rotate | scale | skew | matrix

多重属性操作以空格隔开。

一、rotate（旋转）

rotate(<angle>)：通过指定的角度参数对原元素进行一个2D旋转行为，旋转原点通过transform-origin属性定义，其中angle为有量纲量，正方向为顺时针。

列如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>CSS3之Transform</title>
    <style>
        #test {
            background-color: #666;
            height: 200px;
            width: 200px;
            position:
            absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        #test {
            transform: rotate(30deg);
            transform-origin: 0 100px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

其中“transform-origin: 0 100px”即为定义旋转中心点，默认以元素中心作为旋转点。

二、translate（移动）

translate(x,y)通过参数x、y定义的矢量移动元素，其中x、y为有量纲量，x的正方向向右，y的正方向向下。

例如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>CSS3之Transform</title>
    <style>
        #test {
            background-color: #666;
            height: 200px;
            width: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        #test {
            transform: translate(100px, 200px);
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

同时，translate还可以有一下两种情况——沿X轴或Y轴进行移动，对应translateX和translateY，上面的样式也可以写成“transform: translateX(100px) translateY(200px)”。

三、scale（缩放）

scale(x,y)通过参数x、y控制元素缩放效果，其缩放原点可通过transform-origin属性控制（默认为元素中心），其中x、y为无量纲量，原元素的尺寸为单位1。

列如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>CSS3之Transform</title>
    <style>
        #test {
            background-color: #666;
            height: 200px;
            width: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

        #test {
            transform: scale(2, 0.6);
        }
    </style>
</head>
<body>
<div id="test"></div>
</body>
</html>

其中scale也可以分解成scaleX和scaleY两个方向的量。

四、skew（扭曲）

skew(<angle>,<angle>)通过参数将元素进行x和y方向上进行斜切变形，其中x斜切正方向为逆时针，y斜切正方向为顺时针。

列如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>CSS3之Transform</title>
    <style>
        #test {
            background-color: #666;
            height: 200px;
            width: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

        #test {
            transform: skew(30deg, 15deg);
        }
    </style>
</head>
<body>
<div id="test"></div>
</body>
</html>

五、matrix（矩阵）

matrix(a,b,c,d,e,f)的参数即为一个3x3的矩阵，大学课程中的线性代数中有矩阵变形的内容，有兴趣的可以去了解。

六、transform-origin（定义原点）

transf-origin(x,y)可以重新定义元素变形时的原点，因为默认是以元素中心作为变形原点，不足以满足需求，所以可以通过transform-origin自定义变形原点。其中x、y可以是有量纲量，也可以是无量纲量。

同时在不同的浏览器中，transform-origin需要定义不同的前缀。

列如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>CSS3之Transform</title>
    <style>
        #test {
            background-color: #666;
            height: 200px;
            width: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

        #test {
            transform: skew(30deg, 15deg);
            -webkit-transform: skew(30deg, 15deg);
            -moz-transform: skew(30deg, 15deg);
            -o-transform: skew(30deg, 15deg);
            -ms-transform: skew(30deg, 15deg);
        }
    </style>
</head>
<body>
<div id="test"></div>
</body>
</html>