CSS - 二维变换

CSS 变换用于使用 translate、scale、rotate 和 skew 等属性在二维空间中为元素设置动画。这些函数允许您沿 X 和 Y 轴移动、缩放、旋转和倾斜元素，从而创建各种视觉效果和操作。

二维变换

三维变换

CSS 二维平移

CSS 中的 **translate** 函数沿 X 和 Y 轴移动元素。以下示例显示一个在悬停时沿这些轴移动的方框。

示例

Open Compiler

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 2D Translation */
            transform: translate(50px, 50px);
            transition: transform 0.6s ease;
        }

        /* Hover State with Different 2D Translation */
        .box:hover {
            transform: translate(-50px, -50px);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        2D Box
    </div>
</body>

</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 二维旋转

CSS 中的 **rotate** 函数围绕二维平面上的指定点旋转元素。以下示例显示一个在悬停时旋转的方框，从而产生动态效果。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 2D Rotation */
            transform: rotate(15deg);
            transition: transform 0.6s ease;
        }

        /* Hover State with Different 2D Rotation */
        .box:hover {
            transform: rotate(-15deg);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        2D Box
    </div>
</body>

</html>

CSS 二维缩放

CSS 中的 **scale** 函数沿 X 和 Y 轴缩放元素。以下示例显示一个在悬停时放大和缩小的方框，从而产生缩放效果。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* The Box Element */
        .box {
            width: 150px;
            height: 150px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 2D Scaling */
            transform: scale(1);
            transition: transform 0.6s ease;
        }

        /* Hover State with Different 2D Scaling */
        .box:hover {
            transform: scale(1.5);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        2D Box
    </div>
</body>

</html>

CSS 二维倾斜

CSS 中的 **skew** 函数沿 X 和 Y 轴倾斜元素。以下示例显示一个在悬停时倾斜的方框，从而产生倾斜效果。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 2D Skew */
            transform: skewX(10deg) skewY(10deg);
            transition: transform 0.6s ease;
        }

        /* Hover State with Different 2D Skew */
        .box:hover {
            transform: skewX(-10deg) skewY(-10deg);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        2D Box
    </div>
</body>

</html>

下表列出了用于在二维空间中变换元素的各种属性

属性	描述	示例
translate	沿 X 和 Y 轴平移元素。	试试看
rotate	围绕二维空间中的一个点旋转元素。	试试看
scale	沿 X 和 Y 轴缩放元素。	试试看
skew	沿 X 和 Y 轴倾斜元素。	试试看
transform	将二维或三维变换应用于元素。	试试看

打印页面

CSS - 二维变换

目录

CSS 二维平移

示例

CSS 二维旋转

示例

CSS 二维缩放

示例

CSS 二维倾斜

示例

CSS 二维变换相关属性