Skip to Content
CSS:权威指南,第 5 版
book

CSS:权威指南,第 5 版

by Eric Meyer, Estelle Weyl
May 2025
Intermediate to advanced
1128 pages
15h 21m
Chinese
O'Reilly Media, Inc.
Content preview from CSS:权威指南,第 5 版

第 17 章 变换 变换

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见:translation-feedback@oreilly.com

自 CSS 诞生以来,元素就一直是矩形的,并牢牢地固定在水平轴和垂直轴上。为了让元素看起来像倾斜的一样,出现了一些技巧,但在这些技巧的背后,是一个严格的网格。

有了 CSS变换,,你就有能力打破视觉网格,改变元素的呈现方式。无论是简单地旋转一些照片,使它们看起来更自然,还是创建界面,通过翻转元素来显示信息,或是在侧边栏上玩一些有趣的透视把戏,CSS 变换都能改变你的设计方式--如果你能原谅这种显而易见的表达方式的话。

坐标系

在开始这段旅程之前,让我们先花点时间确定一下方向。具体来说,让我们回顾一下用于将空间中的位置或运动定义为一系列测量值的坐标系。 变换中会用到两种坐标系,熟悉这两种坐标系是个好主意。

首先是直角坐标系,通常称为x/y/z 坐标系。该坐标系通过两个数字(用于二维放置)或三个数字(用于三维放置)来描述一个点在空间中的位置。在 CSS 中,该系统使用三个轴:x 轴(水平);y 轴(垂直);z 轴(深度)。如图 17-1 所示。

css5 1701
图 17-1. CSS 变换中使用的三个直角坐标轴

对于任何二维(2D)变换,您只需关注 x 轴和 y 轴。按照惯例,正 x 值向右 Go,负值向左 Go。同样,正 y 值沿 y 轴向下,负 y 值沿 y 轴向上。

这看起来可能有点奇怪,因为我们往往认为数字越大,表示的位置就越高,而不是越低,这一点很多人在学前代数时都学过。(这就是为什么 "y "标签位于图 17-1 中 y 轴的底部:在所有三个坐标轴上,标签都是朝正方向放置的)。如果你对 CSS 中的绝对定位很有经验,不妨想想绝对定位元素的top 属性值:当top 值为正时,它们会向下移动;当top 的长度为负时,它们会向上移动。

因此,要向左和向下移动一个元素,就需要给它一个负的 x 值和一个正的 y 值。下面是一种方法:

translateX(-5em) translateY(33px)

事实上,这是一个有效的变换值,稍后你就会看到。它的作用是依次将元素向左平移(移动)5ems 和向下移动 33 像素。

如果想要在三维(3D)空间中进行变换,则需要添加一个 Z 轴值。从理论上讲,这个轴是 "伸出 "显示屏并直接穿过你头部的轴。正 Z 值离你更近,负 Z 值离你更远。在这方面,它与z-index属性非常相似。

比方说,我们想将之前移动过的元素添加一个 Z 轴值:

translateX(-5em) translateY(33px) translateZ(200px)

现在,该元素会比不添加 Z 值时更靠近我们 200 像素。

你可能会问,既然全息显示屏既稀有又昂贵,那么究竟是如何将一个元件移近你 200 个像素的呢?在你和显示器之间有多少个空气分子相当于 200 个像素?离你近的元素是什么样的?这些都是非常好的问题,我们稍后再讨论。现在,我们只需接受沿 Z 轴移动元素会使其看起来更近或更远的事实。

需要记住的重要一点是,每个元素都有自己的参照系,因此其坐标轴都是相对于自身的。如图 17-2 所示,如果旋转一个元素,其坐标轴也会随之旋转。任何进一步的变换都是根据这些旋转轴而不是显示轴来计算的。

图 17-2. ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

学习 Java,第 6 版

学习 Java,第 6 版

Marc Loy, Patrick Niemeyer, Daniel Leuck
学习 React,第二版

学习 React,第二版

Alex Banks, Eve Porcello

Publisher Resources

ISBN: 9798341657021