2D转换

CSS 中的 2D 转换允许我们在二维空间中执行一些基本的变换操作，例如移动、旋转、缩放或扭曲等，变换后的元素与绝对定位的元素类似，不会影响周围的元素，但可以和周围的元素重叠，不同的是，转换后的元素在页面中任然会占用为转换之前的空间。

借助 CSS 中的 transform 属性以及下列转换函数就可以实现 2D 转换：

matrix()：以一个包含六个值（a, b, c, d, e, f）的变换矩阵的形式指定一个 2D 变换，相当于直接应用一个 [a,b,c,d,e,f] 的变换矩阵；
translate()：将对象沿 X 轴和 Y 轴平移，该函数需要提供 1~2 个参数，第一个参数对应 X 轴，第二个参数对应 Y 轴，如果未提供第二个参数，则默认值为 0；
translatex()：将对象沿 X 轴（水平方向）的平移；
translatey()：将对象沿 Y 轴（垂直方向）的平移；
rotate()：旋转指定对象，在函数的参数中可以指定旋转的角度；
scale()：将对象进行缩放，该函数需要提供 1~2 个参数，第一个参数对应 X 轴，第二个参数对应 Y 轴，如果未提供第二个参数，则默认取第一个参数的值；
scalex()：将对象进行缩放（改变元素的宽度）；
scaley()：将对象进行缩放（改变元素的高度）；
skew()：将对象沿 X 轴和 Y 轴方向进行倾斜扭曲，该函数需要提供 1~2 个参数，第一个参数对应 X 轴，第二个参数对应 Y 轴。如果未提供第二个参数，则默认值为 0；
skewx()：将对象沿 X 轴的（水平方向）扭曲；
skewy()：将对象沿 Y 轴的（垂直方向）扭曲。

1. translate()

translate() 函数用来根据指定的参数将元素沿水平（X轴）或垂直（Y轴）方向移动，函数的语法格式如下：

translate(tx, ty)

其中 tx 对应元素在水平（X轴）方向的移动距离，ty 对应元素在垂直（Y轴）方向的移动距离，参数 ty 可以忽略（默认为 0），两个参数均可以为负值。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            transform: translate(100px, 10px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

如果只是将元素水平移动或者只是将元素垂直移动，也可以使用 translateX()（将元素水平移动）或 translateY()（将元素垂直移动），translateX() 和 translateY() 函数均只需要提供一个参数即可，例如：

translateX(100px); / 等同于 translate(100px, 0px); /
translateY(10px); / 等同于 translate(0px, 10px); /

2. rotate()

rotate() 函数用来按照给定的角度来旋转元素，函数的语法格式如下：

rotate(a)

其中参数 a 表示元素要旋转的角度，若 a 为正值则表示顺时针旋转，若 a 为负值则表示逆时针旋转。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 20px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3. scale()

scale() 函数用来缩放（放大或缩小）指定的元素，函数的语法格式如下：

scale(sx, sy)

其中 sx 表示水平方向的缩放比例，sy 表示垂直方向的缩放比例。另外，参数 sy 可以省略，它的默认值等于 sx。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            transform: scale(0.7);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

当 scale() 中，给定的参数值在 -1~1 范围之外时，元素将被放大；当在参数值在 -1~1 范围之内时，元素将被缩小。

与 translate() 函数类似，如果是仅在水平方向或者仅在垂直方向上缩放元素大小，也可以使用 scaleX()（在水平方向缩放元素）和 scaleY()（在垂直方向缩放元素）函数。scaleX() 和 scaleY() 函数仅需要提供一个参数即可，例如：

scaleX(0.5); / 等同于 scale(0.5, 1); /
scaleY(0.5); / 等同于 scale(1, 0.5); /

4. skew()

skew() 函数用来将元素沿水平方向（X轴）和垂直方向（Y轴）倾斜扭曲，函数的语法格式如下：

skew(ax, ay)

其中，参数 ax 表示元素水平方向的扭曲角度，参数 ay 表示元素垂直方向的扭曲角度。另外，参数 ay 可以省略，若省略参数 ay，则其默认值为 0。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 10px;
            transform: skew(-15deg, 20deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

另外，如果是仅在水平方向或者仅在垂直方向上对元素进行扭曲，也可以使用 skewX()（在水平方向缩放元素）和 skewY()（在垂直方向缩放元素）函数来完成。skewX() 和 skewY() 函数仅需要提供一个参数即可，例如：

skewX(15deg); / 等同于 skew(15deg, 0deg); /
skewY(15deg); / 等同于 skew(0deg, 15deg); /

5. matrix()

matrix() 函数可以看作是 skew()、scale()、rotate() 和 translate() 几个函数的缩写形式，通过 matrix() 函数可以同时定义所有 2D转换操作，函数的语法格式如下：

matrix(a, b, c, d, tx, ty)

matrix() 函数中的 6 个参数分别对应 scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY() 几个函数，您可以使用 matrix() 来实现各种 2D转换操作，例如：

translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);：其中 tx 和 ty 是水平和垂直平移值；
rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);：其中，a 是度数的值。您可以交换 sin(a) 和 -sin(a) 值来进行反向旋转；
scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);：其中 sx 和 sy 是水平和垂直缩放比例值；
skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);：其中 ax 和 ay 是以 deg 为单位的水平和垂直值。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 10px;
            float: left;
        }
        .one {
            transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        }
        .two {
            margin-left: 35px;
            transform: matrix(0.586, 0.8, -0.8, 0.686, 0, 0);
        }
        .three {
            margin-left: 40px;
            margin-top: 25px;
            transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0);
        }
        .four {
            transform: matrix(0.586, 0.8, -0.8, 0.586, 40, 30);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

3D转换

在 CSS 中，除了可以对页面中的元素进行 2D 转换外，您也可以对象元素进行 3D转换（将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作）。与 2D 转换相同，3D 转换同样不会影响周围的元素，而且可以与其它元素重叠。但是，变换后的元素任然会占用其默认位置（未变换前）的空间。

3D 转换同样需要使用 transform 属性以及一些函数来实现，例如：

matrix3d()：以一个 4x4 矩阵的形式指定一个 3D 转换；
translate3d()：指定对象的 3D 位移，第 1 个参数对应 X 轴，第 2 个参数对应 Y 轴，第 3 个参数对应 Z 轴，参数不允许省略；
translateZ()：指定对象在 Z 轴的平移；
rotate3d()：指定对象的 3D 旋转角度，其中前 3 个参数分别表示旋转的方向 X、Y、Z，第 4 个参数表示旋转的角度，参数不允许省略；
rotateX()：指定对象在 X 轴上的旋转角度；
rotateY()：指定对象在 Y 轴上的旋转角度；
rotateZ()：指定对象在 Z 轴上的旋转角度；
scale3d()：指定对象的 3D 缩放，第 1 个参数对应 X 轴，第 2 个参数对应 Y 轴，第 3 个参数对应 Z 轴，参数不允许省略；
scaleZ()：指定对象的 Z 轴缩放；
perspective()：指定透视距离。

1. translate3d()

translate3d() 函数用于移动元素在 3D 空间中的位置，这种变换的特点是通过三维矢量坐标来定义元素在每个方向上（X轴、Y轴、Z轴）的偏移量。函数的语法格式如下：

translate3d(tx, ty, tz)

参数说明如下：

tx：表示元素在水平方向（X 轴）移动的距离；
ty：表示元素的垂直方向（Z 轴）移动的距离；
tz：表示元素在 Z 轴移动的距离，该参数不能使用百分比值。

translate3d() 函数设置元素在三维空间中的位置：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
        }
        p {
            transform: translate3d(25px, 25px, 50px);
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <p>translate3d(25px, 25px, 50px);</p>
    </div>
</body>
</html>

3D 转换使用的是三维坐标系，但是沿 Z轴方向的移动并不能很明显的显现出来，因为我们往往会将网页看作是一个二维的平面，并没有深度。您可以使用 perspective 和 perspective-origin 属性来为元素添加深度感，即 Z 轴越高的元素显示的越大，反之则越小。

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。参数取值：指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值，none：不指定透视，我们一起来了解一下。

2. translateZ()

函数 translateZ() 用来沿三维坐标系的 Z 轴来移动元素，函数的语法格式如下：

translateZ(tz);

其中参数 tz 用来设置元素在 Z轴上移动的距离。

提示：translateZ(tz); 相当于 translate3d(0, 0, tz); 的简写形式。

使用 translateZ() 属性设置元素沿 Z轴移动的距离：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            perspective:150;
            perspective-origin: 10% 10%;
            -webkit-perspective:150;/*兼容 Safari and Chrome */
            -webkit-perspective-origin: 10% 10%;/*兼容 Safari and Chrome */
            background-color: #CCC;
        }
        p {
            transform: translateZ(30px);
            border: 1px solid red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <p>translateZ(30px);</p>
    </div>
</body>
</html>

3. rotate3d()

rotate3d() 函数用来设置元素沿 X轴、Y轴或 Z轴方向旋转的角度，该函数只会使元素按照固定的轴旋转，不会使元素变形。rotate3d() 函数的语法格式如下：

rotate3d(x, y, z, a)

元素旋转的角度由rotate3d()函数的第四个参数来决定，它是一个值。rotate3d()函数的前三个参数用于决定各个轴的旋转方向。正值表示顺时针旋转，负值表示逆时针旋转。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            perspective:150;
            perspective-origin: 10% 10%;
            -webkit-perspective:150;
            -webkit-perspective-origin: 10% 10%;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
        }
        .transform {
            background-color: red;
            border: none;
            transform: rotate3d(0, 1, 2, 40deg);
        }
    </style>
</head>
<body>
    <div>
        <div class="transform">rotate3d(0, 1, 2, 40deg);</div>
    </div>
</body>
</html>

除了 rotate3d() 函数外，CSS 中还提供了 rotateX()（沿 X 轴旋转元素）、rotateY() （沿 Y 轴旋转元素）和 rotateZ()（沿 Z 轴旋转元素）三个函数来按照不同的坐标轴旋转元素。rotateX()、rotateY()、rotateZ() 函数的语法格式如下：

rotateX(a) / 等同于 rotate3D(1, 0, 0, a); /
rotateY(a) / 等同于 rotate3D(0, 1, 0, a); /
rotateZ(a) / 等同于 rotate3D(0, 0, 1, a); /

4. scale3d()

scale3d() 函数可以改变元素的大小（缩放），函数的语法格式如下：

scale3d(sx, sy, sz)

参数说明如下：

sx：表示元素在 X 轴方向的缩放比例；
sy：表示元素在 Y 轴方向的缩放比例；
sz：表示元素在 Z 轴方向的缩放比例。

使用 scale3d() 函数来缩放指定元素：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            perspective:150;
            perspective-origin: 10% 10%;
            -webkit-perspective:150;
            -webkit-perspective-origin: 10% 10%;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
        }
        .transform {
            background-color: red;
            border: none;
            transform: scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);
        }
    </style>
</head>
<body>
    <div>
        <div class="transform">scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);</div>
    </div>
</body>
</html>

提示：当 scale3d() 函数的参数数值超出 [-1，1] 范围时，将在对应的方向上放大元素；当参数值在 [-1，1] 范围内时，将在当前方向上缩小元素；当参数值等于 1 时，则不会改变元素的大小。

除了 scale3d() 函数外，CSS 中还提供了 scaleX()（沿 X 轴缩放元素）、scaleY() （沿 Y 轴缩放元素）和 scaleZ()（沿 Z 轴缩放元素）三个函数来按照不同的坐标轴缩放元素。scaleX()、scaleY()、scaleZ() 函数的语法格式如下：

scaleX(sx) / 等同于 scale(sx, 1); 和 scale3d(sx, 1, 1); /
scaleY(sy) / 等同于 scale(1, sy); 和 scale3d(1, sy, 1); /
scaleZ(sz) / 等同于 scale3d(1, 1, sz); /

5. matrix3d()

matrix3d() 函数与前面我们学习的 matrix() 函数非常相似，不过 matrix3d() 函数可以使用一个 4 × 4 的矩阵来描述一个三维（3D）转换。通过 matrix3d() 函数可以一次执行所有的 3D转换操作，函数的语法格式如下：

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

参数说明如下：

a1、b1、c1、d1、a2、b2、c2、d2、a3、b3、c3、d3、d4：用来描述各种 3D 转换；
a4、b4、c4：表示元素变换的量。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            perspective:150;
            perspective-origin: 10% 10%;
            -webkit-perspective:150;
            -webkit-perspective-origin: 10% 10%;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
        }
        .transform {
            background-color: red;
            border: none;
            transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
        }
    </style>
</head>
<body>
    <div>
        <div class="transform">matrix3d()</div>
    </div>
</body>
</html>

调整元素大小

为了增强用户体验，CSS3 中新增了一个非常实用的 resize 属性，该属性允许用户通过拖动的方式来自由缩放元素的尺寸，在此之前要实现类似的效果还需要借助大量的 JavaScript 代码。resize 属性的语法格式如下：

resize: none|both|horizontal|vertical;

语法说明如下：

none：用户无法调整元素的尺寸；
both：用户可调整元素的高度和宽度；
horizontal：用户可调整元素的宽度；
vertical：用户可调整元素的高度。

在使用 resize 属性时还需要注意以下几点：

单独设置 resize 属性是无效的，resize 属性需要与 overflow 属性结合使用才有效，并且 overflow 属性的值需要设置为 auto、hidden 或 scroll；
并不是所有的元素都可以设置 resize 属性，比如 img 和 table 属性就没办法使用 resize 属性。

示例代码如下：

        {
            border: 1px solid;
            width: 300px;
            resize: both;
            overflow: auto;
        }

运行上面的代码，然后通过拖动元素的右下角就可以调整元素的大小。

0
前端程序猿

css笔记08-css 2D转换/3D转换/resize调整大小

2D转换

1. translate()

2. rotate()

3. scale()

4. skew()

5. matrix()

3D转换

1. translate3d()

2. translateZ()

3. rotate3d()

4. scale3d()

5. matrix3d()

调整元素大小

0 前端程序猿

css笔记08-css 2D转换/3D转换/resize调整大小

2D转换

1. translate()

2. rotate()

3. scale()

4. skew()

5. matrix()

3D转换

1. translate3d()

2. translateZ()

3. rotate3d()

4. scale3d()

5. matrix3d()

调整元素大小

0
前端程序猿