CSS 转换：The Old the New and the Remarkable

css 变换已经存在了一段时间，并且得到了所有主要浏览器的支持。然而，人们通常认为它们只适用于旋转或倾斜。这与事实相去甚远！事实上，您可以使用 CSS 转换来做一些令人惊奇的事情，正如您将从本课程中学到的那样。

我们将一起发现一些使用 translate、scale、rotate、skew 和 transform-origin 属性的非凡方法。

4 个 CSS 变换函数

首先，我将向您简要介绍 CSS 变换，并告诉您它们的全部内容，以防您不熟悉该主题。之后，我们将深入研究 4 个特定的转换函数，并且在每种情况下，我们将讨论语法、基本用法以及一些您可能没有想到的非凡用途。 

CSS 转换：The Old the New and the Remarkable(旧的、新的和卓越的)

源文件

通过分叉和试验在这个 Codepen 系列中找到的笔来跟随课程。

在本课程中

本课程包括以下课程：

1. CSS 转换的全部内容

CSS Transforms 是 CSS 中的一个模块，它定义了如何通过改变形状和位置在 2D 和 3D 空间中转换元素。这通过修改坐标空间来实现，而不影响正常的文档流。这意味着什么？在本节中，我将给你一个简单的例子。

2. 翻译

我们来谈谈translate函数值。翻译元素可能是最常见的 CSS 转换，因为它非常简单。让我向您展示如何将它与（以及其他示例）此定价表一起使用：

3. 规模

好吧，让我们谈谈规模，我们将从看一下定义开始。查看此演示，了解变换比例可以通过一些时尚的悬停效果实现：

4. 旋转和变换原点

我们列表中的第三种变换类型是旋转，顾名思义，您可以使用它来旋转元素。让我来告诉你怎么做。

5.歪斜

第四个也是最后一个变换函数skew()，在本课中，我将向您展示如何使用它。

结论

那么你有它！我们尝试了不同的 CSS 变换，我们了解了这些变换类型的基本语法、基本用法以及一些更有趣的用法。