在现实世界中使用 CSS 变换

suchonaseo

在本文中，我们将了解如何在现实世界中使用 CSS 变换来解决各种任务并获得有趣的结果。具体来说，您将学习如何垂直调整元素、创建漂亮的箭头、构建加载动画和创建翻转动画。 HTML 元素的转换于 2012 年成为 CSS3 标准，并且在此之前已在某些浏览器中可用。转换允许您转换网页上的元素 - 正如我们有关 CSS 转换的 101 篇文章中所述。您只需一行代码即可轻松旋转、缩放或倾斜元素，这在以前是很困难的。2D 和 3D 变换均可用。 至于浏览器支持，所有主流浏览器都支持2D 变换，包括 Internet Explorer，从版本 9 开始就支持。至于 3D 变换，IE从版本 10 开始仅部分支持。 本文不会重点讨论转换的基础知识。如果您对变换不太有信心，我建议您首先阅读有关2D和3D 变换的内容。

垂直对齐子项 Learn to Code with JavaScript 任何网页设计师都知道垂直对齐元 WhatsApp 号码数据 素是多么乏味。对于不熟悉 CSS 的人来说，这项任务可能听起来非常简单，但实际上，一代又一代的开发人员小心翼翼地保留着大量的技术。有些人建议使用display ，有些人投票支持display: table和 伴随样式，而真正的老派程序员仍在用表格设计他们的网站（只是开玩笑，不要这样做！）。此外，可以使用 Flexbox 或网格来解决此任务，但对于较小的组件，转换可能是一个更简单的选择。 当元素高度可变时，垂直对齐可能会更加复杂。然而，CSS 转换提供了一种解决该问题的方法。让我们看一个非常简单的例子，有两个嵌套 没什么复杂的：只是两个带有不同长度的Lorem Ipsum 文本的嵌套块。



让我们设置父级的宽度、高度和边框，以及一些间距以使其看起来更好另外，稍微放大孩子的字体大小结果，你会看到类似这样的东西： 我们最初的布局 Learn to Code with JavaScript 现在您的客户说：“请垂直对齐文本，使其出现在这些红色框的中间”。不！。但不要害怕：我们已经做好了变革的准备！第一步是相对定位我们的孩子并将它们移动 50% 到底部之后，应用一个秘密成分——translateY函数——它将垂直重新定位元素那么，这里发生了什么？top: 50%将子元素的顶部移动到父元素的中心： 将子元素的顶部移动到父元素的中心 但这还不够，因为我们希望孩子的中心与父母的中心对齐。因此，通过应用translateY我们将孩子向上移动 50% 的高度： 使用translateY 垂直居中 一些开发人员报告说，由于元素被放置在“半像素”上，这种方法可能会导致子元素变得模糊。