CSS - 2D 变换：让网页元素动起来

简介

你好，未来的网页设计超级巨星！今天，我们将踏上一段激动人心的旅程，探索 CSS 2D 变换的世界。在本教程结束时，你将能够让你的网页元素跳舞、旋转和缩放，就像以前从未有过的一样。所以，系好安全带，让我们跳进去吧！

CSS - 2d transform

在我们开始让东西移动之前，让我们先了解一下 CSS 2D 变换是什么。简单来说，2D 变换允许你在二维空间中修改元素。这意味着你可以移动、旋转、缩放和倾斜元素，而不会影响页面上其他元素的布局。

想象一下在平面上玩纸剪裁。你可以把它们四处滑动，让它们变大或变小，或者以不同的角度倾斜它们。本质上，这就是我们将要对我们的网页元素所做的！

2D 变换的核心是 transform 属性。这个神奇的 CSS 属性是所有动作发生的地方。下面是其基本语法：

选择器 {
transform: 函数(值);
}

现在这可能看起来有点抽象，别担心。我们会在接下来的例子中详细解释。

现在，让我们来看看我们可以使用哪些不同的变换函数。我喜欢把它们想象成我们可以给元素的特殊能力。下面是一个总结主要 2D 变换函数的表格：

让我们逐一探索这些！

translate() 函数允许你从当前位置移动一个元素。就像给你的元素一个小推，向任何你想要的方向。

.box {
width: 100px;
height: 100px;
background-color: blue;
transform: translate(50px, 30px);
}

在这个例子中，我们的蓝色方块将从原始位置向右移动 50 像素，向下移动 30 像素。就像告诉你的元素：“向右走 50 步，向下走 30 步。”

你也可以使用 translateX() 和 translateY() 来水平或垂直移动元素：

.box-x {
transform: translateX(50px); /* 向右移动 50px */
}

.box-y {
transform: translateY(30px); /* 向下移动 30px */
}

使用 rotate()，你可以让你的元素像唱片一样旋转！该值以度（deg）为单位指定。

.box {
width: 100px;
height: 100px;
background-color: green;
transform: rotate(45deg);
}

这将使我们的绿色方块顺时针旋转 45 度。想要逆时针旋转？只需使用一个负值：

.box-counter {
transform: rotate(-45deg);
}

scale() 函数允许你改变元素的大小。值为 1 保持原始大小，小于 1 使其变小，大于 1 使其变大。

.box {
width: 100px;
height: 100px;
background-color: red;
transform: scale(1.5);
}

这将使我们的红色方块在宽度和高度上增加 50%。你也可以独立缩放宽度和高度：

.box-custom {
transform: scale(2, 0.5); /* 宽度加倍，高度减半 */
}

skew() 允许你倾斜你的元素。就像把画框倾斜到一边。值以度为单位。

.box {
width: 100px;
height: 100px;
background-color: yellow;
transform: skew(20deg, 10deg);
}

这将使我们的黄色方块沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度。你也可以使用 skewX() 和 skewY() 进行单独轴的倾斜。

matrix() 函数是变换的强大工具。它允许你将所有变换函数组合成一个。它接受六个参数：a, b, c, d, e, 和 f。

.box {
transform: matrix(1, 0.5, -0.5, 1, 30, 10);
}

这可能看起来令人畏惧，但它本质上是在一次操作中组合缩放、倾斜和移动。不要担心立即掌握这个——这是一种高级技术，随着你对变换的熟悉程度提高，你会逐渐掌握它。

当你开始组合不同的变换时，真正的魔法才会发生。你可以通过空格分隔，将多个变换应用于一个元素：

.super-box {
width: 100px;
height: 100px;
background-color: purple;
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}

这将使我们的紫色方块向右和向下移动 50 像素，旋转 45 度，并使其增加 50%。就像给你的元素超级能力！

默认情况下，变换是从元素的中心应用的。但如果你想要从角落旋转或从顶部缩放呢？这时 transform-origin 就派上用场了：

.box {
width: 100px;
height: 100px;
background-color: orange;
transform: rotate(45deg);
transform-origin: top left;
}

这将使我们的橙色方块旋转 45 度，但是从其左上角而不是中心旋转。

就这样，伙计们！你已经迈出了进入 CSS 2D 变换激动人心世界的第一步。记住，掌握这些技术的关键在于实践。所以，继续前进，尝试不同的组合，并看着你的网页元素变得生动！

在你继续你的网页开发之旅时，你会发现变换不仅仅是让东西看起来很酷（尽管它们确实如此）。它们是强大的工具，用于创建交互性和响应式设计，可以极大地增强用户体验。

所以继续探索，继续创造，最重要的是，玩得开心！谁知道呢？下一个惊人的网站动画可能只是一个变换之遥。快乐编码！

Credits: Image by storyset