diff --git a/files/zh-cn/web/css/angle/index.md b/files/zh-cn/web/css/angle/index.md index 11a215b11c2b1a..ca3a71808365c6 100644 --- a/files/zh-cn/web/css/angle/index.md +++ b/files/zh-cn/web/css/angle/index.md @@ -1,36 +1,78 @@ --- title: slug: Web/CSS/angle +l10n: + sourceCommit: 48813be4b5187c6a17e744e7f9ba37a146302847 --- {{CSSRef}} -[CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) **``** 用于表示角的大小，单位为度（degrees）、百分度（gradians）、弧度（radians）或圈数（turns）。在 {{cssxref("<gradient>")}} 和 {{cssxref("transform")}} 的某些方法等场景中有所应用。 +**``** [CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types)表示以度（degrees）、百分度（gradians）、弧度（radians）或圈数（turns）表示的角度值。例如，它在 {{cssxref("<gradient>")}} 和 {{cssxref("transform")}} 的某些函数中被使用。 + +{{EmbedInteractiveExample("pages/css/type-angle.html")}} ## 语法 -`` 数据类型由 {{cssxref("<number>")}} 和下列单位组成。数字与单位之间没有空格。数字为 0 时，单位可以省略。 +`` 数据类型由 {{cssxref("<number>")}} 后跟以下列出的单位之一组成。与所有尺寸一样，数字与单位之间没有空格。数字 `0` 后的单位是可选的。 -`` 可以使用 `+` 或 `-` 开头。正数表示顺时针的角，负数表示逆时针的角。对于静态的角，同样的角度可以使用任意等效的值表示。比如 `90deg` 等于 `-270deg`，`1turn` 等于 `4turn`。而对于动态的角，比如应用了 {{cssxref("animation")}} 或 {{cssxref("transition")}} 时，显示效果则不一样。 +此外，它前面可以加上一个 `+` 或 `-` 号。正数表示顺时针角度，而负数表示逆时针角度。对于给定单位的静态属性，任何角度都可以用各种等价值来表示。例如，`90deg` 等于 `-270deg`，`1turn` 等于 `4turn`。对于动态属性，比如应用 {{cssxref("animation")}} 或 {{cssxref("transition")}} 时，效果却会有所不同。 ### 单位 - `deg` - - : [度]()。一个完整的圆是 `360deg`。例：`0deg`，`90deg`，`14.23deg`。 + - : 以[度（角）]()为单位表示角度。一个完整的圆是 `360deg`。例：`0deg`、`90deg`、`14.23deg`。 - `grad` - - : [百分度](https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%BA%A6)。一个完整的圆是 `400grad`。例：`0grad`，`100grad`，`38.8grad`。 + - : 以[百分度](https://zh.wikipedia.org/wiki/百分度)为单位表示角度。一个完整的圆是 `400grad`。例：`0grad`、`100grad`、`38.8grad`。 - `rad` - - : [弧度](https://zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6)。一个完整的圆是 2π 弧度，约等于 `6.2832rad`。`1rad` 是 180/π 度。例：`0rad`，`1.0708rad`，`6.2832rad`。 + - : 以[弧度](https://zh.wikipedia.org/wiki/弧度)为单位表示角度。一个完整的圆是 2π 弧度，约等于 `6.2832rad`，`1rad` 是 180/π 度。例：`0rad`、`1.0708rad`、`6.2832rad`。 - turn - - : 圈数。一个完整的圆是 `1turn`。例：`0turn`，`0.25turn`，`1.2turn`。 + - : 以圈数为单位表示角度。一个完整的圆是 `1turn`。例：`0turn`、`0.25turn`、`1.2turn`。 ## 示例 -| ![Angle90.png](angle90.png) | 直角：`90deg = 100grad = 0.25turn ≈ 1.5708rad` | -| ------------------------------------- | ------------------------------------------------------------ | -| ![Angle180.png](angle180.png) | 平角：`180deg = 200grad = 0.5turn ≈ 3.1416rad` | -| ![AngleMinus90.png](angleminus90.png) | 直角（逆时针）：`-90deg = -100grad = -0.25turn ≈ -1.5708rad` | -| ![Angle0.png](angle0.png) | 零角：`0 = 0deg = 0grad = 0turn = 0rad` | +### 设置顺时针的直角 + + + + + + + + +
通过从最顶部点移动到最右侧点，沿圆顺时针旋转 90 度的示意图。90deg = 100grad = 0.25turn ≈ 1.5708rad
+ +### 设置平角 + + + + + + + + +
通过从最顶部点移动到最底部点，沿圆顺时针旋转 180 度的示意图。180deg = 200grad = 0.5turn ≈ 3.1416rad
+ +### 设置逆时针直角 + + + + + + + + +
通过从最顶部点移动到最左侧点，沿圆逆时针旋转 90 度的示意图。-90deg = -100grad = -0.25turn ≈ -1.5708rad
+ +### 设置零角 + + + + + + + + +
显示 0 度旋转的示意图，没有转动。0 = 0deg = 0grad = 0turn = 0rad
## 规范 @@ -39,3 +81,12 @@ slug: Web/CSS/angle ## 浏览器兼容性 {{Compat}} + +## 参见 + +- [CSS 数据类型](/zh-CN/docs/Web/CSS/CSS_Types) +- [``](/zh-CN/docs/Web/CSS/gradient) 类型 +- CSS 旋转变换：[`rotate()`](/zh-CN/docs/Web/CSS/transform-function/rotate)、[`rotate3d()`](/zh-CN/docs/Web/CSS/transform-function/rotate3d)、[`rotateX()`](/zh-CN/docs/Web/CSS/transform-function/rotateX)、[`rotateY()`](/zh-CN/docs/Web/CSS/transform-function/rotateY) 和 [`rotateZ()`](/zh-CN/docs/Web/CSS/transform-function/rotateZ) +- [CSS 变换](/zh-CN/docs/Web/CSS/CSS_transforms) +- [使用 CSS 变换](/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) +- [使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)