CSS平面转换 - 技术栈

平面转换

一、关键属性总结

[二、2D 变换函数](#二、2D 变换函数)

[1. 平移（Translate）](#1. 平移（Translate）)

[2. 旋转（Rotate）](#2. 旋转（Rotate）)

[3. 缩放（Scale）](#3. 缩放（Scale）)

[4. 倾斜（Skew）](#4. 倾斜（Skew）)

三、变换原点（transform-origin）

四、组合变换

[1. 多函数组合](#1. 多函数组合)

[2. 顺序影响效果](#2. 顺序影响效果)

[3. 层叠上下文](#3. 层叠上下文)

五、实用场景与代码示例

[1. 悬停放大按钮](#1. 悬停放大按钮)

[2. 居中元素](#2. 居中元素)

[3. 旋转加载图标](#3. 旋转加载图标)

[4. 平行四边形导航](#4. 平行四边形导航)

示例1：

示例2：

transform 是 CSS 中用于对元素进行 2D 或 3D 变换的属性，支持平移、旋转、缩放、倾斜等操作。它不改变页面布局流，仅影响元素的视觉呈现，常用于动画和交互效果。

平面转换

CSS 通过 transform 属性对元素进行 2D 空间变换，包括移动、旋转、缩放、倾斜等。

一、关键属性总结

转换原点	`transform-origin`	定义变换基准点	绕特定点旋转、自定义缩放中心

二、2D 变换函数

1. 平移（Translate）

函数与语法

translate(x, y)：沿 X 和 Y 轴移动。
translateX(x)：仅水平移动。
translateY(y)：仅垂直移动。

示例

css 复制代码

.box {
  transform: translate(50px, 20px); /* 向右 50px，向下 20px */
}

应用场景：微调元素位置、实现悬停偏移效果。

2. 旋转（Rotate）

函数与语法

rotate(angle)：顺时针旋转指定角度（负值逆时针）。

示例

css 复制代码

.box {
  transform: rotate(45deg); /* 旋转 45 度 */
}

应用场景：图标旋转、卡片翻转动画。

3. 缩放（Scale）

函数与语法

scale(sx, sy) ：水平缩放 sx 倍，垂直缩放 sy 倍（单参数时等比例）。
scaleX(sx)：仅水平缩放。
scaleY(sy)：仅垂直缩放。

示例

css 复制代码

.box {
  transform: scale(1.2); /* 放大到 1.2 倍 */
}
.box:hover {
  transform: scale(1.5); /* 悬停时放大 */
}

应用场景：按钮悬停放大、图片缩放效果。

4. 倾斜（Skew）

函数与语法

skew(ax, ay) ：水平倾斜 ax 度，垂直倾斜 ay 度。
skewX(ax)：仅水平倾斜。
skewY(ay)：仅垂直倾斜。

示例

css 复制代码

.box {
  transform: skew(15deg, 10deg); /* 水平倾斜 15°，垂直倾斜 10° */
}

应用场景：创建平行四边形、斜切文字效果。

三、变换原点（`transform-origin`）

作用

定义元素变换的 基准点 （默认 50% 50%，即中心）。

语法

关键字：left top、center bottom。
长度值：20px 30px。
百分比：100% 100%。

示例：

css 复制代码

.box {
  transform-origin: left top;  /* 以左上角为基准点旋转 */
  transform: rotate(45deg);
}

四、组合变换

1. 多函数组合

多个变换函数用空格分隔。

css 复制代码

.box {
  transform: translate(50px, 0) rotate(45deg);
}

2. 顺序影响效果

若需平移后固定方向：先平移再旋转
若需旋转后沿新方向移动：先旋转再平移

示例对比：

css 复制代码

/* 先平移后旋转 */
.box1 { transform: translateX(100px) rotate(90deg); }

/* 先旋转后平移 */
.box2 { transform: rotate(90deg) translateX(100px); }

box1 向右移动 100px 后旋转。
box2 先旋转 90°，再沿新方向平移。

3. 层叠上下文

影响：transform 会创建新的层叠上下文，影响 z-index 的层级关系。

五、实用场景与代码示例

1. 悬停放大按钮

css 复制代码

.button {
  transition: transform 0.3s;
}
.button:hover {
  transform: scale(1.1);
}

2. 居中元素

css 复制代码

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  /* 精准居中 */
}

3. 旋转加载图标

css 复制代码

.loader {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

4. 平行四边形导航

css 复制代码

.nav-item {
  transform: skewX(-20deg);
}
.nav-item p {
  transform: skewX(20deg); /* 反向倾斜文本保持水平 */
}

示例1：

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            display: flex;

            margin: 100px auto;
            width: 1366px;
            height: 600px;

            background-image: url(./res/bg.jpg);
            overflow: hidden;
        }

        .left,
        .right {
            width: 50%;
            height: 600px;
            background-image: url(./res/fm.jpg);

            transition: all 1s;
        }

        .right {
            background-position: right 0;
        }

        .box:hover .left {
            transform: translate(-100%);
        }

        .box:hover .right {
            transform: translate(100%);
        }

    </style>
</head>
<body>
    
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>
</html>

示例2：

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            margin: 100px auto;

            position: relative;
            width: 250px;
            height: 210px;
        }

        .box img {
            width: 250px;
            height: 210px;            
        }

        .pic::after {
            position: absolute;

            content: "";
            width: 58px;
            height: 58px;
            top: 50%;
            left: 50%;
            background-image: url(./res/play.png);

            transition: all .7s;  
            opacity: 0;          
            overflow: hidden;

            transform: translate(-50%,-50%) scale(4);

        }

        .pic:hover::after {
            transform: translate(-50%,-50%) scale(1);
            opacity: 1;  
        }

    </style>
</head>
<body>
    
    <div class="box">
        <div class="pic"><img src="./res/party.jpeg" alt=""></div>
    </div>

</body>
</html>