CSS - 二維變換

CSS 變換用於使用 translate、scale、rotate 和 skew 等屬性在二維空間中為元素設定動畫。這些函式允許您沿 X 和 Y 軸移動、縮放、旋轉和傾斜元素，從而建立各種視覺效果和操作。

二維變換

三維變換

CSS 二維平移

CSS 中的 **translate** 函式沿 X 和 Y 軸移動元素。以下示例顯示一個在懸停時沿這些軸移動的方框。

示例

 <!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>

CSS 二維旋轉

CSS 中的 **rotate** 函式圍繞二維平面上的指定點旋轉元素。以下示例顯示一個在懸停時旋轉的方框，從而產生動態效果。

示例

<!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 軸縮放元素。以下示例顯示一個在懸停時放大和縮小的方框，從而產生縮放效果。

示例

<!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 軸傾斜元素。以下示例顯示一個在懸停時傾斜的方框，從而產生傾斜效果。

示例

<!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 二維變換相關屬性