recursal/MDN huggingface dataset:
translate()
===========

**`translate()`** 这个 CSS 函数在水平和/或垂直方向上重新定位元素。其结果是 `<transform-function>` 类型。

尝试一下
----

该变换由二维向量构成。它的坐标定义了元素在每个方向上移动了多少。

语法
--


```css
/\* Single <length-percentage> values \*/
transform: translate(200px);
transform: translate(50%);

/\* Double <length-percentage> values \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### 值

单个 `<length-percentage>` 作为参数

该值是 `<length>` 或者 `<percentage>` 代表翻译向量的横坐标 (horizontal, x-coordinate) . 而向量的纵坐标 (vertical, y-coordinate) 会被默认为 `0`. 例如，`translate(2)` 等价于 `translate(2, 0)` 。里面还可以填百分比值，百分比值是指 `transform-box` 属性定义的参考框的宽度。

参数是两个 `<length-percentage>` 构成

此值描述两个 `<length>` 或 `<percentage>` 值，分别代表翻译的横坐标 (x-coordinate) 和纵坐标 (y-coordinate) 向量。百分比作为第一个值表示宽度，第二个部分表示由 `transform-box` 属性定义的参考框的高度。



| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 平移不是 ℝ2 中的线性变换，因此不能使用矩阵来表示。 | 

1
 0
tx

0
 1
ty

0
0
1

 | 

1
 0
tx

0
 1
ty

0
0
1

 | 

1
 0
0
tx

0
 1
0
ty

0
0
1
0

0
0
0
1

 |
| `[1 0 0 1 tx ty]` |

### 形式语法


```css
translate(<length-percentage>, <length-percentage>?)
```

示例
--

### 使用单个轴平移

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(
    10px
  ); /\* Equal to: translateX(10px) or translate(10px, 0) \*/
  background-color: pink;
}
```


#### 结果

### y 轴和 x 轴都平移

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
perspective()
=============

透视函数定义了到 z=0 的坐标轴，使用者能够得到 3D 定位元素的透视，每个 3D 元素在 Z 轴的位置大于零意味着离使用者更近，因此会变得更大，同理当元素 Z 周小于零时会变得 ge

T 更小，变化的幅度决定于属性值的变化大小

语法
--
```

perspective(l)
```

参数
--

*l*

这个`<length>` 得到的是距离 0 坐标的距离。被用作提供一个透视渐变属性给某个元素。如果这个值是 0 或者不合法的值，将不会产生透视的变化。



| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 这个属性变化提供了一个 3D 空间，并且不会变成平面类型 | 
 A perspective is not a linear transform in ℝ3 and cannot be
 represented using a matrix in the Cartesian coordinates system.
  | 

1
 0
0
0

0
 1
0
0

0
0
1
0

0
0

−1
 /d

1

 |

Examples
--------

TBD

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-perspective |
rotate3d()
==========

**`rotate3d()`** CSS 函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。

尝试一下
----

在 3D 空间之中，旋转有 3 个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 `transform-origin` CSS 属性定义）。如果这些矢量被赋予非标准值，即 3 个坐标值的平方和不等于 1 时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个 CSS 属性的其他效果（译者注：如 transform 中的多项变换）。

**备注：** 与平面旋转相反的是，3D 旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。

语法
--
```

rotate3d(x, y, z, a)
```

### 值

*x*

`<number>` 类型，可以是 0 到 1 之间的数值，表示旋转轴 X 坐标方向的矢量。

*y*

`<number>` 类型，可以是 0 到 1 之间的数值，表示旋转轴 Y 坐标方向的矢量。

*z*

`<number>` 类型，可以是 0 到 1 之间的数值，表示旋转轴 Z 坐标方向的矢量。

*a*

`<angle>` 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。



|  |  |
| --- | --- |
| 在ℝ2上的笛卡尔坐标 | 这种变换应用于 3D 空间，不可用于平面空间 |
| 在ℝℙ2上的齐次坐标 |
| 在ℝ3上的笛卡尔坐标 | 

1
 +(1
 -cos(
 a))(

x
2

-1)


z
·sin(
 a)+
 x
y(1
 -cos(
 a))


-
y
·sin(
 a)
 +
x
z
·(1
 -cos(
 a))


-
z
·sin(
 a)
 +
x
y
·(1
 -cos(
 a))

1+(1-cos(a))(y2-1)

x
·sin(
 a)
 +
y
z
·(1
 -cos(
 a))


ysin(a) + xz(1-cos(a))
-xsin(a)+yz(1-cos(a))
1+(1-cos(a))(z2-1)
t

0
0
0
1

 |
| 在ℝℙ3上的齐次坐标 |  |

示例
--

### 绕 Y 轴旋转

#### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```


#### CSS


```css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}
```


#### 效果

### 围绕自定义轴旋转

#### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```


#### CSS


```css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}
```


#### 效果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotate3d |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
rotateX()
=========

**`rotateX()`** 函数定义了一个转换，它可以让一个元素围绕横坐标 (水平轴) 旋转，而不会对其进行变形。它的结果是一个`<transform-function>`数据类型。

尝试一下
----

旋转轴围绕原点旋转，而这个原点通过`transform-origin` 属性来定义。

**备注：** `rotateX(a)` 相当于 `rotate3d(1, 0, 0, a)`.

**备注：** 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。

语法
--

**`rotateX()`** 引起的旋转量由`<angle>`指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。
```

rotateX(a)
```

### 参数值

`a`

`a` 是一个`<angle>` ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。



| 笛卡儿坐标 ℝ2 | 齐次坐标 ℝℙ2 | 笛卡儿坐标 ℝ3 | 齐次坐标 ℝℙ3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 

1
0
0

0
cos(a)
-sin(a)

0
sin(a)
cos(a)

 | 

1
0
0
0

0
cos(a)
-sin(a)
0

0
sin(a)
cos(a)
0

0
0
0
1

 |

示例
--

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateX(45deg);
  background-color: pink;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatex |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
scale()
=======

CSS 函数 `scale()` 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

尝试一下
----

该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

当坐标值处于区间 `[-1, 1]` 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为 1 时将不进行任何处理，当为负数时，将进行*像素点反射*之后再进行大小的修改。

**备注：** `scale()` 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 `scale3D()` 。

语法
--


```css
scale(sx)
```


或


```css
scale(sx, sy)
```

值
-

*sx*

`<number>`，表示缩放向量的横坐标。

*sy*

`<number>` ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 ***sx***。从而使得元素在保持原有形状下均等缩放



| ℝ2上的笛卡尔坐标变换 | ℝℙ2上的齐次坐标变换 | ℝ3上的笛卡尔坐标变换 | ℝℙ3上的齐次坐标变换 |
| --- | --- | --- | --- |
| 

sx
0

0
sy

 | 

sx
 0
0

0
 sy
0

0
0
1

 | 

sx
 0
0

0
 sy
0

0
0
1

 | 

sx
 0
0
0

0
sy
0
0

0
0
1
0

0
0
0
1

 |
| `[sx 0 0 sy 0 0]` |

示例
--

### 单一维度缩放

#### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /\* 等同于变换：scaleX(2) scaleY(2);\*/
  transform: scale(2);
  background-color: blue;
}
```


#### 结果

### 在 X 和 Y 两个维度缩放并移动缩放中心

#### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /\* 等同于 scaleX(2) scaleY(0.5) \*/
  transform: scale(2, 0.5);
  transform-origin: left;
  background-color: blue;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scale |
matrix3d()
==========

CSS 函数 **`matrix3d()`** 以 4x4 齐次矩阵的形式定义一个 3D 转换。其结果是一个 `<transform-function>` 数据类型。

语法
--

`matrix3d()` 函数由 16 个参数指定。这些参数以列为主的顺序进行描述。
```

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
```

### Values

*a1* *b1* *c1* *d1* *a2* *b2* *c2* *d2* *a3* *b3* *c3* *d3*

Are `<number>`s describing the linear transformation.

*a4* *b4* *c4 d4*

Are `<number>`s describing the translation to apply.


**备注：** Until Firefox 16, Gecko accepted a `<length>` value for *a4*, *b4* and *c4*.


| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 
 A generic 3D
 affine transformation
 can't be represented using a Cartesian-coordinate matrix, as
 translations are not linear transformations.
  | 

a1
a2
a3
a4

b1
b2
b3
b4

c1
c2
c3
c4

d1
d2
d3
d4

 |

Matrix translation and scale example
------------------------------------

### HTML


```html
<div class="foo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
  soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
  quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>
```

### CSS


```css
html {
  width: 100%;
}
body {
  height: 100vh;
  /\* Centering content \*/
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
.foo {
  width: 50%;
  padding: 1em;
  color: white;
  background: #ff8c66;
  border: 2px dashed black;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  /\* Setting up animation for better demonstration \*/
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  from {
    /\*
 Identity matrix is used as basis here.
 The matrix below describes the
 following transformations:
 Translates every X point by -50px
 Translates every Y point by -100px
 Translates every Z point by 0
 Scales down by 10%
 \*/
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -100, 0, 1.1);
  }
  50% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
  }
  to {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-matrix3d |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* Understanding the CSS Transforms Matrix
translate3d()
=============

`translate3d()` CSS 函数在 3D 空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

语法
--


```css
translate3d(tx, ty, tz)
```

常量
--

`tx`

是一个 `<length>` 代表移动向量的横坐标。

`ty`

是一个`<length>` 代表移动向量的纵坐标。

`tz`

是一个 `<length>` 代表移动向量的 z 坐标。它不能是`<percentage>` 值；那样的移动是没有意义的。



| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 此变换适用于 3D 空间，并不适用于这两种情况。 | 平移不是ℝ3中的线性变换，不能使用笛卡尔坐标矩阵表示。 | 

1
 0
0
tx

0
 1
0
ty

0
0
1
tz

0
0
0
1

 |

示例
--

### 单轴变化示例

#### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) translate3d(10px, 0px, 0px);
  /\* equivalent to perspective(500px) translateX(10px)\*/
  background-color: blue;
}
```


#### 结果

### z 轴与 x 轴变化

#### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) translate3d(10px, 0px, 100px);
  background-color: blue;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-translate3d |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
rotateZ()
=========

**`rotateZ()`** 函数定义了一个转换，它可以让一个元素围绕横 Z 轴旋转，而不会对其进行变形。它的结果是一个`<transform-function>`数据类型。

尝试一下
----

旋转轴围绕原点旋转，而这个原点通过`transform-origin` 属性来定义。

**备注：** `rotateZ(a)` 相当于 `rotate(a)` or `rotate3d(0, 0, 1, a)`。

**备注：** 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。

语法
--

**`rotateZ()`** 引起的旋转量由`<angle>`指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。
```

rotateZ(a)
```

### 参数值

`a`

`a` 是一个`<angle>` ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。



| 笛卡儿坐标 ℝ2 | 齐次坐标 ℝℙ2 | 笛卡儿坐标 ℝ3 | 齐次坐标 ℝℙ3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0
0

sin(a)
cos(a)
0
0

0
0
1
0

0
0
0
1

 |

示例
--

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateZ(45deg);
  background-color: pink;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatez |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
translateX()
============

translateX() 函数表示在二维平面上水平方向移动元素。其结果的数据类型是`<transform-function>`。

![](/zh-CN/docs/Web/CSS/transform-function/translateX/transform-functions-translatex_2.png)

**备注：** `translateX(tx)`等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

语法
--


```css
translateX(t)
```

### 参数

`t`

代表了向量平移的横坐标长度`<length>`。



| ℝ2空间中的笛卡尔坐标 | 在ℝℙ2上的投影坐标 | 在ℝ3上的笛卡尔坐标 | 在ℝℙ3上的投影坐标 |
| --- | --- | --- | --- |
| 在ℝ2 空间中的平移并非线性变化，因此不能表示为笛卡尔坐标矩阵。 | 

1 
 0 
t




0 
 1 
0





0 
0 
1

 | 

1 
 0 
t




0 
 1 
0





0 
0 
1

 | 

1 
 0 
0 
t




0 
 1 
0 
0





0 
0 
1 
0





0 
0 
0 
1

 |
| `[1 0 0 1 t 0]` |

示例
--

### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```

### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px); /\* 等同于 translate(10px) \*/
  background-color: pink;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatex |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
scaleX()
========

**`scaleX()`** CSS 函数将每个元素点的横坐标修改为一个常数因子，除了该比例因子为 1，在这种情况下，函数是身份变换。缩放不是各向同性的，并且元素的角度不保守。

![](/zh-CN/docs/Web/CSS/transform-function/scaleX/scalex.png)

`scaleX(sx)` 是 `scale(sx, 1)` 或 `scale3d(sx, 1, 1)` 的一个速记/缩写。

**备注：** Note:

**`scaleX(-1)`** 定义一个 轴向对称性 (axial symmetry) ，它具有一个垂直轴通过原点 (由 `transform-origin` 属性规定)。

Syntax
------
```

scaleX(s)
```

Values
------

*s*

Is a `<number>` representing the scaling factor to apply on the abscissa of each point of the element.



| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 

s
0

0
1

 | 

s
 0
0

0
 1
0

0
0
1

 | 

s
 0
0

0
 1
0

0
0
1

 | 

s
 0
0
0

0
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[s 0 0 1 0 0]` |

Examples
--------

### Without changing the origin

#### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: scaleX(2);
  background-color: blue;
}
```


#### Result

### Translating the origin of the transformation

#### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: scaleX(2);
  transform-origin: left;
  background-color: blue;
}
```


#### Result

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scalex |
translateY()
============

`translateY()` 在页面垂直移动元素，结果是 CSS 数据类型 `<transform-function>`。

![](/zh-CN/docs/Web/CSS/transform-function/translateY/translatey.png)

**备注：** `translateY(ty)` 对应 `translate(0, ty)` 或`translate3d(0, ty, 0)`。

语法
--


```css
/\* <length-percentage> values \*/
transform: translateY(200px);
transform: translateY(50%);
```

值
-

`<length>` 或 `<percentage>`

表示变换向量的纵坐标。百分比指的是盒子高度，盒子由属性 `transform-box` 定义。



| 笛卡尔坐标 ℝ2 | 在ℝℙ2上的同类坐标 | 在ℝ3上的笛卡尔坐标 | 在ℝℙ3同类坐标 |
| --- | --- | --- | --- |
| 在ℝ2 上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵 | 

1
 0
0

0
 1
t

0
0
1

 | 

1
 0
0

0
 1
t

0
0
1

 | 

1
 0
0
0

0
 1
0
t

0
0
1
0

0
0
0
1

 |
| `[1 0 0 1 0 t]` |

### 语法
```

translateY(`<length-percentage>`)
```

示例
--

### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```

### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatey |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
skew()
======

**`skew()`** 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个`<transform-function>` 数据类型

尝试一下
----

这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

语法
--

`skew()` 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。
```

skew(ax)

skew(ax, ay)
```

### 参数值

`ax`

`ax` 是一个 `<angle>`，表示用于沿横坐标扭曲元素的角度。

`ay`

`ay` 是一个 `<angle>` ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为 0，导致纯水平倾斜。



| 笛卡儿坐标 ℝ2 | 齐次坐标 ℝℙ2 | 笛卡儿坐标 ℝ3 | 齐次坐标 ℝℙ3 |
| --- | --- | --- | --- |
| 

1
 tan(ax)

tan(ay)
 1

 | 

1
 tan(ax)
0

tan(ay)
 1
0

0
0
1

 | 

1
 tan(ax)
0

tan(ay)
 1
0

0
0
1

 | 

1
 tan(ax)
0
0

tan(ay)
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[1 tan(ay) tan(ax) 1 0 0]` |

示例
--

### 使用单个参数

#### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /\* Equal to skewX(10deg) \*/
  background-color: pink;
}
```


#### 结果

### 使用两个参数

#### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skew |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
skewX()
=======

**`skewX()`** 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个`<transform-function>`数据类型。

尝试一下
----

这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

**备注：** `skewX(a)` 相当于 `skew(a)`。

语法
--


```css
skewX(a)
```

### 参数值

`a`

`a` 是一个 `<angle>`，表示用于沿横坐标扭曲元素的角度。



| 笛卡儿坐标 ℝ2 | 齐次坐标 ℝℙ2 | 笛卡儿坐标 ℝ3 | 齐次坐标 ℝℙ3 |
| --- | --- | --- | --- |
| 

1
 tan(ay)

0
 1

 | 

1
 tan(ay)
0

0
 1
0

0
0
1

 | 

1
 tan(ay)
0

0
 1
0

0
0
1

 | 

1
 tan(ay)
0
0

0
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[1 0 tan(a) 1 0 0]` |

示例
--

### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewX(10deg); /\* Equal to skew(10deg) \*/
  background-color: pink;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewx |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
XML 简介
======

XML（Extensible Markup Language）是一种类似于 HTML，但是没有使用预定义标记的语言。因此，可以根据自己的设计需求定义专属的标记。这是一种强大将数据存储在一个可以存储、搜索和共享的格式中的方法。最重要的是，因为 XML 的基本格式是标准化的，如果你在本地或互联网上跨系统或平台共享或传输 XML，由于标准化的 XML 语法，接收者仍然可以解析数据。

有许多基于 XML 的语言，包括 XHTML、MathML、SVG、RSS 和 RDF (en-US)。你也可以创建自己的。

构建 XML 文档
---------

XML 和基于 XML 的语言的整个结构是建立在标签之上的。

### XML 声明

XML——声明并非是一种标签，其用于传输文档的元数据。


```html
<?xml version="1.0" encoding="UTF-8"?>
```


#### 属性

`version`

当前文档使用的版本。

`encoding`

当前文档使用的编码。

### 注释


```html
<!-- Comment -->
```

“标准的”XML（有效且格式良好）
-----------------

### 设计规则的标准

判定一个 XML 文档正确的标准是：

* 文档必须是一个格式良好的文档。
* 文档遵循 XML 所有的语法规则并且有效。
* 文档遵循特定语义的规则，这些规则通常规定在 XML 或 DTD 规范中（**文档类型定义**）。
### 示例


```xml
<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
        Hello World
    <!--missing </warning> -->
</message>
```


现在让我们看看同一文档的更正版本：


```xml
<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
         Hello World
    </warning>
</message>
```


一个包含未定义标签的文档是无效的。例如，如果我们没有定义 `<warning>` 标签，这个文件将是无效的。

大多数浏览器都提供了可以识别格式不正确的 XML 文档的调试器。

实体
--

像 HTML 一样，XML 为一些特别预留的符号定义了一些方法，称为实体（entities），例如用于标记的大于号。下面是五个你必须知道的符号：

| 实体 | 符号 | 描述 |
| --- | --- | --- |
| &lt; | < | 小于符号 |
| &gt; | > | 大于符号 |
| &amp; | & | 和 |
| &quot; | " | 一个双引号 |
| &apos; | ' | 一个单引号 |

这里只有五个声明的实体，更多的方法可以借助文档类型定义 (en-US)引入。例如，为了创建一个 `&warning;` 实体，你可以这样做：


```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE body [
 <!ENTITY warning "Warning: Something bad happened... please refresh and try again.">
]>
<body>
  <message> &warning; </message>
</body>
```


你可以用数字和一些符号去表示一些特殊字符；例如，&#xA9; 代表符号“©”。

展示 XML
------

XML 通常被用作描述，但是还有很多方法去展示 XML 数据。如果你没有定义让 XML 展示的特别方式，那么原始的 XML 会被展现在浏览器上。

一个展示 XML 输出的方法是将 CSS 应用于文档，用 `xml-stylesheet` 去处理指令。
```

<?xml-stylesheet type="text/css" href="stylesheet.css"?>
```


当然，也有其他更有效的方法去展示 XML，**Extensible Stylesheet Language Transformations**（XSLT）可以将 XML 转换为其他语言（例如 HTML）。这使得 XML 非常地有力。


```xml
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
```

推荐
--

这篇文章明显是一篇非常简略的 XML 介绍，其中有一些例子和参考来帮助你入门。关于 XML 的更多细节，你可以在 Web 中查找更深入的文章。

学习超文本标记语言（HTML）将帮助你更好的理解 XML。

参见
--

* XML.com
* 扩展标记语言（XML）@ W3.org
* 使用 XML: A List Apart
解析或序列化 XML
==========

有时，你可能需要解析 XML 内容，并把它转换为 DOM 树，或者，反过来将现有的 DOM 树序列化成 XML。在本文中，我们将了解 web 平台提供的对象，以便轻松地完成序列化和解析 XML 的常见任务。

`XMLSerializer`

序列化 DOM 树，把它们转换成包含 XML 的字符串。

`DOMParser`

通过解析一个包含 XML 的字符串来构建 DOM 树，返回一个基于输入数据的适当的 `XMLDocument` 或者是 `Document`。

`XMLHttpRequest`

从一个 URL 中加载内容；XML 的内容被作为一个带有内建 XML 的 DOM 树的 XML `Document` 对象返回。

XPath

一种创建包含 XML 文档特定部分的地址，并基于这些地址进行 XML 节点定位的字符串的技术。

创建一个 XML 文档
-----------

使用以下方法来创建一个 XML 文档，该文档是 `Document` 的一个实例。

### 把字符串解析成 DOM 树

下面这个例子使用 `DOMParser` 把字符串中的 XML 片段转换为 DOM 树：


```js
const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
// 打印根元素的名称或错误信息
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  console.log("error while parsing");
} else {
  console.log(doc.documentElement.nodeName);
}
```

### 把可寻址的 URL 资源解析成 DOM 树

#### 使用 XMLHttpRequest

下列示例代码读取一个可寻址的 URL 资源文件，并将其解析成 DOM 树：


```js
const xhr = new XMLHttpRequest();

xhr.onload = () => {
  dump(xhr.responseXML.documentElement.nodeName);
};

xhr.onerror = () => {
  dump("Error while getting XML.");
};

xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();
```


在 `xhr` 对象 `responseXML` 字段中返回的值是一个通过解析 XML 构造的 `Document`。

如果这个文档是 HTML，上面实例代码将会返回一个 `Document`。如果它是 XML，那获取的结果对象实际上是一个 `XMLDocument`。这两种类型实质上是一样的，不同点大部分是历史遗留的，尽管区分它们也会有一些实际好处。

**备注：** 事实上，`HTMLDocument` 也是一个接口，但是它不必是一个独立的类型。在一些浏览器上它是，但在另外一些浏览器上它仅仅是 `Document` 接口的别名。

序列化一个 XML 文档
------------

给定一个 `Document`，你可以使用 `XMLSerializer.serializeToString()` (en-US) 方法把文档的 DOM 树序列化为 XML。

使用下面的方法来序列化在先前章节中创建的 XML 文档内容。

### 把 DOM 树序列化成字符串

首先，使用如何创建一个 DOM 树中的方法构建一个 DOM 树。也可以使用从 `XMLHttpRequest` 中获得的 DOM 树。

为了序列化 DOM 树的 `doc` 为 XML 文档，调用 `XMLSerializer.serializeToString()` (en-US)：


```js
const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);
```

### 序列化 HTML 文档

如果你手上的 DOM 是一个 HTML 文档，你可以使用 `serializeToString()` 将其序列化；但是也有一个更简单的选择：直接用 `Element.innerHTML` 属性（如果你仅仅想得到指定节点的后代的话）或 `Element.outerHTML` 属性（如果你想得到节点本身及它所有的后代的话）。


```js
const docInnerHtml = document.documentElement.innerHTML;
```


因此，`docInnerHtmlL` 是一个包含 HTML 内容的文档的字符串，换句话来说，也是 `<body>` 元素的内容。

你可以使用以下代码得到 `<body>` *和*它的后代对应的 HTML：


```js
const docOuterHtml = document.documentElement.outerHTML;
```

参见
--

* XPath
* `XMLHttpRequest`
* `Document`、`XMLDocument` 和 `HTMLDocument`
正则表达式（regexp）
=============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

EXSLT 正则表达式包使用 JavaScript 风格的正则表达式来提供测试、匹配和替换文本的功能。该正则表达式包的命名空间是 `http://exslt.org/regular-expressions`。