在现实世界中使用CSS转换

CSS 转换：解决设计难题的强大工具

本文将探讨 CSS 转换在实际应用中的强大功能，展示其如何高效解决各种设计挑战，并创造引人注目的视觉效果。我们将学习如何垂直对齐元素、创建美观的箭头、构建加载动画以及实现翻转动画等。

CSS3 转换于 2012 年成为标准，在此之前部分浏览器已提供支持。转换允许您轻松变换网页元素，例如旋转、缩放或倾斜元素，只需一行代码即可实现，这在以前是难以实现的。CSS 转换支持 2D 和 3D 变换。

浏览器兼容性方面，所有主流浏览器都支持 2D 转换，包括 Internet Explorer 9 及更高版本。而 3D 转换在 IE10 及更高版本中仅部分支持。

本文不会讲解转换的基础知识。如果您对转换不太熟悉，建议您先阅读关于 2D 和 3D 转换的入门资料。

垂直对齐子元素

垂直对齐元素一直是网页设计师的难题。虽然看起来简单，但实际上存在多种繁琐的技术。一些方法建议使用 display: inline 和 vertical-align: middle，另一些则建议使用 display: table 及其相关的样式。当然，Flexbox 或 Grid 也能解决这个问题，但对于较小的组件，转换可能是一个更简单的选择。

当元素高度可变时，垂直对齐会更加复杂。CSS 转换提供了一种解决此问题的有效方法。以下是一个简单的示例，包含两个嵌套的 div：

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

我们为父元素设置宽度、高度和边框，并添加一些间距使其更美观：

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

然后，使用 transform: translateY(-50%); 将文本垂直居中：

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

为了避免模糊，可以添加 perspective(1px):

.child {
  transform: perspective(1px) translateY(-50%);
}

这样，即使文本长度不同，子元素也能完美垂直居中。

创建箭头

另一个有趣的用例是创建可缩放的对话框箭头。您可以使用图形编辑器创建箭头，但这比较繁琐，而且位图图像可能无法很好地缩放。

纯 CSS 解决方案更有效。假设我们有一个文本框：

<div class="box">
  <div class="box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

使用 ::before 伪元素创建箭头，并使用旋转变换将其转换为箭头形状：

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  transform: rotate(45deg);
}

这样，即使更改页面字体大小，箭头也能保持比例。

创建“跳跃球”加载动画

为了指示加载过程，可以使用 CSS 动画和转换创建一个跳跃球加载动画：

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

使用 SVG 创建“旋转器”加载动画 (此部分内容与原文类似，为了避免重复，此处省略详细代码，仅保留概述)

可以使用 SVG 创建更复杂的加载动画，例如旋转器。通过组合使用 SVG 元素、CSS 动画和转换，可以创建具有视觉吸引力的加载效果。

创建翻转动画

最后，我们来看一个带有翻转动画的图片示例。当您将鼠标悬停在图片上时，它会翻转并显示其描述。这对于类似 Instagram 的网站非常有用。(此部分内容与原文类似，为了避免重复，此处省略详细代码，仅保留概述)

通过使用 3D 转换和 transform-style: preserve-3d;，以及 transition 属性，可以实现平滑的翻转动画效果。

注意事项

虽然 CSS 转换和动画功能强大，但应谨慎使用，避免过度使用导致用户体验不佳。

总结

本文展示了 CSS 转换结合其他技术如何解决各种设计任务。我们学习了如何垂直对齐元素、创建可缩放的箭头、跳跃和旋转加载动画以及实现翻转动画。 记住，CSS 应该用于提升用户体验，而不是仅仅炫技。

(原文中“Frequently Asked Questions about CSS Transforms”部分内容与本文内容高度重合，故此处省略)

以上是在现实世界中使用CSS转换的详细内容。更多信息请关注PHP中文网其他相关文章！