笙亿网络策划

CSS 2d transform 怎么用？2D 变换属性有哪些？

约 9 分钟读完 29 阅
文章导读
Previous Quiz Next CSS 变换用于修改元素的形状和尺寸，并负责使用 translate()、scale()、rotate() 和 skew() 等函数在二维空间中移动元素。这些函数允许您沿 X 和 Y 轴移动、缩放、旋转和倾斜元素，从而创建各种视觉效
📋 目录
  1. 壹 目录
  2. 贰 CSS 2D Translate
  3. 叁 CSS 2D Rotate
  4. 肆 CSS 2D Scale
  5. 伍 CSS 2D Skew
  6. 陆 CSS 2D Transform 相关函数
A A

CSS - 2D 变换

Previous
Quiz
Next

CSS 变换用于修改元素的形状和尺寸，并负责使用 translate()、scale()、rotate() 和 skew() 等函数在二维空间中移动元素。这些函数允许您沿 X 和 Y 轴移动、缩放、旋转和倾斜元素，从而创建各种视觉效果和变换。

2D Transform
3D Transform

目录

  • CSS 2D Translate
  • CSS 2D Rotate
  • CSS 2D Scale
  • CSS 2D Skew
  • CSS 2D 变换相关函数

 

CSS 2D Translate

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;
        }

        /* 盒子元素 */
        .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;
            /* 初始 2D 平移 */
            transform: translate(50px, 50px);
            transition: transform 0.6s ease;
        }

        /* 悬停状态下的不同 2D 平移 */
        .box:hover {
            transform: translate(-50px, -50px);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

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

</html>

CSS 2D Rotate

CSS rotate() 函数围绕 2D 平面上的指定点旋转元素。

示例

以下示例展示了一个在悬停时旋转的盒子，创建动态效果。

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

        /* 盒子元素 */
        .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;
            /* 初始 2D 旋转 */
            transform: rotate(15deg);
            transition: transform 0.6s ease;
        }

        /* 悬停状态下的不同 2D 旋转 */
        .box:hover {
            transform: rotate(-15deg);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

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

</html>

CSS 2D Scale

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;
        }

        /* 盒子元素 */
        .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;
            /* 初始 2D 缩放 */
            transform: scale(1);
            transition: transform 0.6s ease;
        }

        /* 悬停状态下的不同 2D 缩放 */
        .box:hover {
            transform: scale(1.5);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

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

</html>

CSS 2D Skew

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;
        }

        /* 盒子元素 */
        .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;
            /* 初始 2D 倾斜 */
            transform: skewX(10deg) skewY(10deg);
            transition: transform 0.6s ease;
        }

        /* 悬停状态下的不同 2D 倾斜 */
        .box:hover {
            transform: skewX(-10deg) skewY(-10deg);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

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

</html>

CSS 2D Transform 相关函数

下表列出了所有用于在二维空间中变换元素的各种函数。

Function 描述 示例
translate() CSS translate() 函数沿 X 轴和 Y 轴平移元素。
试一试
rotate() CSS rotate() 函数在 2D 空间中围绕一个点旋转元素。
试一试
scale() CSS scale() 函数沿 X 轴和 Y 轴缩放元素。
试一试
skew() CSS skew() 函数沿 X 轴和 Y 轴倾斜元素。
试一试
transform() CSS transform() 函数对元素应用 2D 或 3D 变换。
试一试