css变形

# CSS 中的 `transform` 属性用于应用二维或三维转换效果，使元素可以旋转、缩放、平移或倾斜。它可以通过多个变换函数组合使用，使得元素的视觉表现变得更加丰富。

# 1. 语法

transform: transform-function1(value1) transform-function2(value2) ...;

# 2. 常用变换函数

以下是一些常用的变换函数及其使用示例。

# 1. `translate()`

描述: 移动元素，接受两个参数（x、y）。

示例:

.translate-example {
    transform: translate(50px, 100px); /* 向右移动 50 像素，向下移动 100 像素 */
}

1
2
3

# 2. `scale()`

描述: 缩放元素，接受两个参数（x、y），默认值为 1。

示例:

.scale-example {
    transform: scale(1.5, 0.5); /* 水平放大 1.5 倍，垂直缩小 0.5 倍 */
}

1
2
3

# 3. `rotate()`

描述: 旋转元素，接受一个角度参数。

示例:

.rotate-example {
    transform: rotate(30deg); /* 顺时针旋转 30 度 */
}

1
2
3

# 4. `skew()`

描述: 倾斜元素，接受两个参数（x、y）表示倾斜的角度。

示例:

.skew-example {
    transform: skew(10deg, 20deg); /* 水平倾斜 10 度，垂直倾斜 20 度 */
}

1
2
3

# 5. `matrix()`

描述: 通过 6 个参数创建一个 2D 变换矩阵。

示例:

.matrix-example {
    transform: matrix(1, 0, 0, 1, 50, 100); /* 平移 50 像素和 100 像素 */
}

1
2
3

# 3. 例子

下面是一个综合示例，展示如何使用 transform 属性来创建不同的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transform 示例</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            transition: transform 0.5s; /* 平滑过渡效果 */
        }
        .translate {
            transform: translate(20px, 20px);
        }
        .scale {
            transform: scale(1.5);
        }
        .rotate {
            transform: rotate(45deg);
        }
        .skew {
            transform: skew(20deg, 10deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box translate">Translate</div>
        <div class="box scale">Scale</div>
        <div class="box rotate">Rotate</div>
        <div class="box skew">Skew</div>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 4. 总结

transform 属性可以组合多种变换效果（如平移、缩放、旋转、倾斜等）。
可以通过设置不同的参数来精确控制元素的变换效果。
使用 transition 属性可以让变换效果更加平滑。

如果你有其他具体问题或者想要更深入的示例，欢迎随时询问！

# 3D变换

# 1. 基本概念

在 3D 变形中，通常涉及以下几个函数：

rotateX(deg): 绕 X 轴旋转。
rotateY(deg): 绕 Y 轴旋转。
rotateZ(deg): 绕 Z 轴旋转（与 2D 旋转相同）。
translateX(px): 沿 X 轴移动。
translateY(px): 沿 Y 轴移动。
translateZ(px): 沿 Z 轴移动（向前或向后）。
scaleX(n), scaleY(n), scaleZ(n): 进行沿各轴的缩放。

# 2. 3D 变形的语法

transform: rotateX(30deg) rotateY(45deg) translateZ(50px);

# 3. 3D 场景设置

为了使 3D 变形效果显著，通常需要设置一个 3D 上下文。可以通过在父元素上使用 perspective 属性来实现：

.container {
    perspective: 1000px; /* 设置 3D 视角 */
}

1
2
3

# 4. 示例代码

以下是一个完整的示例，展示如何使用 CSS 实现 3D 变形效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 3D Transform 示例</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        .container {
            perspective: 1000px; /* 设置 3D 视角 */
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 20px;
            transition: transform 0.5s; /* 平滑过渡效果 */
            transform-style: preserve-3d; /* 保持 3D 变换 */
        }

        .box:hover {
            transform: rotateY(45deg) rotateX(30deg) translateZ(50px); /* 3D 旋转和移动 */
        }

        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid #333;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
        }

        .face-front  { transform: translateZ(50px); }
        .face-back   { transform: rotateY(180deg) translateZ(50px); }
        .face-left   { transform: rotateY(-90deg) translateZ(50px); }
        .face-right  { transform: rotateY(90deg) translateZ(50px); }
        .face-top    { transform: rotateX(90deg) translateZ(50px); }
        .face-bottom { transform: rotateX(-90deg) translateZ(50px); }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="face face-front">Front</div>
            <div class="face face-back">Back</div>
            <div class="face face-left">Left</div>
            <div class="face face-right">Right</div>
            <div class="face face-top">Top</div>
            <div class="face face-bottom">Bottom</div>
        </div>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# 5. 关键点

perspective: 用于定义观察者与元素之间的距离，从而影响 3D 效果的强度。
transform-style: preserve-3d: 确保子元素的 3D 变换效果得以保留。
transition: 为变换添加平滑过渡效果。

# 总结

CSS 3D 变形可以用来创建引人注目的用户界面效果。通过结合不同的变换函数和设置适当的 3D 上下文，可以实现丰富的视觉表现。

在线编辑

上次更新: 2025/02/25, 18:30:54

← 正则复杂选择器 css动画→

css变形

# CSS 中的 transform 属性用于应用二维或三维转换效果，使元素可以旋转、缩放、平移或倾斜。它可以通过多个变换函数组合使用，使得元素的视觉表现变得更加丰富。

# 1. 语法

# 2. 常用变换函数

# 1. translate()

# 2. scale()

# 3. rotate()

# 4. skew()

# 5. matrix()

# 3. 例子

# 4. 总结

# 3D变换

# 1. 基本概念

# 2. 3D 变形的语法

# 3. 3D 场景设置

# 4. 示例代码

# 5. 关键点

# 总结

# CSS 中的 `transform` 属性用于应用二维或三维转换效果，使元素可以旋转、缩放、平移或倾斜。它可以通过多个变换函数组合使用，使得元素的视觉表现变得更加丰富。

# 1. `translate()`

# 2. `scale()`

# 3. `rotate()`

# 4. `skew()`

# 5. `matrix()`