CSS3 2D 转换介绍

CSS3 中的 2D 转换（2D Transforms）允许你在二维平面上对元素进行操作，如移动、旋转、缩放和倾斜等，这可以让网页的布局和动画效果更加丰富多样。以下是一些主要的 2D 转换方法：

一、translate（移动）

语法：transform: translate(x,y);或者transform: translateX(x);和transform: translateY(y);。其中x和y是长度值（可以是像素px、百分比%等）。例如，translate(50px, 100px)会将元素在水平方向（x 轴）移动 50 像素，在垂直方向（y 轴）移动 100 像素。而translateX(30%)会将元素在水平方向按照自身宽度的 30% 进行移动。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .box {
            width: 100px;
            height: 100px;
            background - color: blue;
            transform: translate(50px, 50px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这个例子中，蓝色方块会在原来位置的基础上向右移动 50 像素并且向下移动 50 像素。

二、rotate（旋转）

语法：transform: rotate(angle);，其中angle是旋转的角度，单位可以是deg（度）。例如，rotate(45deg)会将元素顺时针旋转 45 度。如果要逆时针旋转，可以使用负数角度，如rotate(-30deg)。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .box {
            width: 100px;
            height: 100px;
            background - color: green;
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三、scale（缩放）

语法：transform: scale(x,y);或者transform: scaleX(x);和transform: scaleY(y);。x和y是缩放比例因子，是无单位的数字。例如，scale(2,1.5)会将元素在水平方向（x 轴）放大 2 倍，在垂直方向（y 轴）放大 1.5 倍。scale(0.5)等同于scale(0.5,0.5)，会将元素缩小为原来的一半。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .box {
            width: 100px;
            height: 100px;
            background - color: red;
            transform: scale(1.2,1.2);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

四、skew（倾斜）

语法：transform: skew(x - angle,y - angle);或者transform: skewX(x - angle);和transform: skewY(y - angle);。x - angle和y - angle是倾斜的角度，单位是deg。例如，skew(30deg, 10deg)会使元素在水平方向倾斜 30 度，在垂直方向倾斜 10 度。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       .box {
            width: 100px;
            height: 100px;
            background - color: yellow;
            transform: skew(20deg,0);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

黄色方块会在水平方向倾斜 20 度。

这些 2D 转换方法可以单独使用，也可以组合使用。例如，transform: translate(50px, 50px) rotate(30deg);会先将元素移动，然后再进行旋转。并且，这些转换是基于元素的自身坐标系统进行的，它们不会影响文档流中其他元素的位置（除非元素因为转换而脱离了文档流）。