diff options
Diffstat (limited to 'files/zh-cn/web/css/transform-function')
19 files changed, 2985 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/transform-function/index.html b/files/zh-cn/web/css/transform-function/index.html new file mode 100644 index 0000000000..590db891e0 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/index.html @@ -0,0 +1,945 @@ +--- +title: transform-function +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Reference + - CSS Transforms + - Layout + - Reference + - Web + - 参考 + - 布局 +translation_of: Web/CSS/transform-function +--- +<p>{{CSSRef}}</p> + +<p> <strong><code><transform-function></code> </strong>CSS数据类型用于对元素的显示做变换。通常，这种变换可以由矩阵表示，并且可以使用每个点上的矩阵乘法来确定所得到的图像。</p> + +<h2 id="2D图形_的坐标系统">2D图形 的坐标系统</h2> + +<p>目前有多种用来描述转换坐标模型，最常用的是 <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">笛卡尔坐标系统</a> 和 <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">齐次坐标</a>。</p> + +<h3 id="笛卡尔_坐标">笛卡尔 坐标</h3> + +<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p> + +<p>在笛卡尔坐标系中，每个 <a href="https://en.wikipedia.org/wiki/Euclidean_geometry">欧氏空间</a> 里的点都由横坐标和纵坐标这两个值来确定。 在CSS（和大部分的计算机图形学）中，原点 <code>(0, 0)</code> 在元素的左上角。每个点都使用数学上的向量符号(x,y)来描述。</p> + +<p>每个线性函数使用 2 × 2 矩阵描述，如:</p> + +<p> a c<br> + b d</p> + +<div style="text-align: center;"></div> + +<p>将矩阵乘法用于上述坐标系中的每个点，一个变换就形成了：</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div> + +<p>可以在一行中进行多次矩阵乘法进行变换：</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div> + +<div style="text-align: center;"></div> + +<p>有了这种方法，就可以描述大部分常见的变换并因此可以将他们组合起来，如：旋转、缩放或拉伸。（事实上，所有线性函数的变换都可以被描述。）组合的变换是从右到左生效的。然而，有一种常见的变换并不是线性的，所以当这种变换要用这种方法来表示时，应该被单独列出来：位移。位移的向量 <code>(tx, ty)</code> 必须单独表示，作为两个附加参数。</p> + +<p><a href="https://zh.wikipedia.org/wiki/%E5%A5%A5%E5%8F%A4%E6%96%AF%E7%89%B9%C2%B7%E8%B4%B9%E8%BF%AA%E5%8D%97%E5%BE%B7%C2%B7%E8%8E%AB%E6%AF%94%E4%B9%8C%E6%96%AF" title="奥古斯特·费迪南德·莫比乌斯">奥古斯特·费迪南德·莫比乌斯</a> 的 <a href="http://en.wikipedia.org/wiki/Projective_geometry">齐次坐标系</a> 表示了一个 3 × 3 的变换矩阵，虽然它对于非专业的人来说更复杂和少见，这并不影响将它表示为线性函数，并且这样就不需要考虑额外的特例。</p> + +<h2 id="3D_图形的坐标">3D 图形的坐标</h2> + +<h2 id="转换函数的定义">转换函数的定义</h2> + +<h3 id="matrix"><code>matrix()</code></h3> + +<p>CSS 函数 <code>matrix()</code> 用六个指定的值来指定一个均匀的二维（2D）变换矩阵。这个矩形中的常量值是不作为参数进行传递的，其他的参数则在主要列的顺序中描述。</p> + +<p><code>matrix(a, b, c, d, tx, ty)</code> 是 <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code> 的简写</p> + +<div class="note"><strong>注意：</strong>直到火狐浏览器的 16 版本, Gecko 内核才为 <strong>tx</strong> 和 <strong>ty</strong> 兼容了 {{cssxref("<length>")}} 这个数据格式。</div> + +<h4 id="语法">语法</h4> + +<pre class="syntaxbox">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>) +</pre> + +<h4 id="属性值">属性值</h4> + +<dl> + <dt><em>a</em> <em>b</em> <em>c</em> <em>d</em></dt> + <dd>以 {{cssxref("<number>")}} 的格式来描述线性变换</dd> + <dt><em>tx</em> <em>ty</em></dt> + <dd>以 {{cssxref("<number>")}} 的格式来描述变换的量</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><br> + <sup>笛卡尔坐标系中用二阶矩阵表示的点坐标</sup></th> + <th scope="col"><br> + <sup>齐次坐标系中用三阶矩阵表示的点坐标</sup></th> + <th scope="col"><br> + <sup>笛卡尔坐标系中用三阶矩阵表示的点坐标</sup></th> + <th scope="col"><br> + <sup>齐次坐标系中用四阶矩阵表示的点坐标</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd> a </mtd><mtd>c</mtd></mtr></mtable></mfenced></math><br> + <mtr><mtd> b </mtd><mtd>d</mtd></mtr></td> + <td><math><mfenced><mtable><mtr><mtd> a </mtd><mtd>c </mtd><mtd>ty</mtd></mtr></mtable></mfenced></math><br> + <mtr><mtd> b </mtd><mtd>d </mtd><mtd>tx</mtd></mtr><br> + <mtr><mtd> 0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></td> + <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd> a </mtd><mtd>c </mtd><mtd>ty</mtd></mtr></mtable></mfenced></math><br> + <mtr><mtd> b </mtd><mtd>d </mtd><mtd>tx</mtd></mtr><br> + <mtr><mtd> 0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></td> + <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd> a </mtd><mtd>c </mtd><mtd>0 </mtd><mtd>tx</mtd></mtr></mtable></mfenced></math><br> + <mtr><mtd> b </mtd><mtd>d </mtd><mtd>0 </mtd><mtd>ty</mtd></mtr><br> + <mtr><mtd> 0 </mtd><mtd>0 </mtd><mtd>1 </mtd><mtd>0</mtd></mtr><br> + <mtr><mtd> 0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></td> + </tr> + <tr> + <td> <code>[a b c d tx ty]</code></td> + </tr> + </tbody> +</table> + +<h3 id="matrix3d"><code>matrix3d()</code></h3> + +<p>CSS 函数 <code>matrix3d()</code> 用一个 4 × 4 的齐次矩阵来描述一个三维（3D）变换。16个参数都在主要列的顺序中描述。</p> + +<div class="note"><strong>注意：</strong>直到火狐浏览器的 16 版本, Gecko 内核才为 <strong>a4，</strong> <strong>b4</strong> 和 <strong>c4</strong>兼容了 {{cssxref("<length>")}} 这个数据格式。</div> + +<h4 id="语法_2">语法</h4> + +<pre class="syntaxbox">matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)</pre> + +<h4 id="参数">参数</h4> + +<dl> + <dt><em>a1 b1 c1 d1</em> <em>a2 b2 c2 d2 </em><em>a3 b3 c3 d3</em> <em>d4</em></dt> + <dd>以 {{cssxref("<number>")}} 的格式来描述线性变换</dd> + <dt><em>a4</em> <em>b4 c4</em></dt> + <dd>以 {{cssxref("<number>")}} 的格式来描述变换的量</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><br> + <sup>笛卡尔坐标系中用二阶矩阵表示的点坐标</sup></th> + <th scope="col"><br> + <sup>齐次坐标系中用三阶矩阵表示的点坐标</sup></th> + <th scope="col"><br> + <sup>笛卡尔坐标系中用三阶矩阵表示的点坐标</sup></th> + <th scope="col"><br> + <sup>齐次坐标系中用四阶矩阵表示的点坐标</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>这个变换是属于 3D 空间的，并不适用于这两种情况。</p> + </td> + <td colspan="1" rowspan="2">笛卡尔坐标矩阵不允许由一般的三维仿射变换来作为平移，因为平移不是线性变换。</td> + <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1 </mtd><mtd>a2 </mtd><mtd>a3 </mtd><mtd>a4</mtd></mtr><mtr><mtd>b1 </mtd><mtd>b2 </mtd><mtd>b3 </mtd><mtd>b4</mtd></mtr></mtable></mfenced></math><br> + <mtr><mtd>c1 </mtd><mtd>c2 </mtd><mtd>c3 </mtd><mtd>c4</mtd></mtr><br> + <mtr><mtd>d1 </mtd><mtd>d2 </mtd><mtd>d3 </mtd><mtd>d4</mtd></mtr></td> + </tr> + </tbody> +</table> + +<h3 id="perspective"><code>perspective()</code></h3> + +<p> <code>perspective()</code> 这个CSS函数定义了 z=0平面与用户之间的距离，以便给三维定位元素一定透视度。当每个3D元素的z>0时会显得比较大，而在z<0时会显得比较小。其影响的程度由这个属性的值来决定。</p> + +<h4 id="语法_3">语法</h4> + +<pre class="syntaxbox">perspective(l) +</pre> + +<h4 id="参数_2">参数</h4> + +<dl> + <dt><em>l</em></dt> + <dd>该参数是一个 {{cssxref("<length>")}} 给定从用户（显示屏）到z = 0平面的距离。 它用于将透视图转换应用于元素。 如果它是0或负值，则不应用透视变换。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>这个变换是属于 3D 空间的，并不适用于这两种情况。</p> + </td> + <td colspan="1" rowspan="2">笛卡尔坐标矩阵不允许由一般的三维仿射变换来作为平移，因为平移不是线性变换。</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h3 id="rotate"><code>rotate()</code></h3> + +<p><img src="/@api/deki/files/5976/=transform-functions-rotate_19.5.png" style="float: left;">The <code>rotate()</code> CSS 函数 定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围(如 {{ Cssxref("transform-origin") }} 属性所指定) 。 移动量由指定角度定义;如果为正值，则运动将为顺时针，如果为负值，则为逆时针 。 180°的旋转称为点反射 (<em>point reflection</em>)。</p> + + + + + +<h4 id="语法_4">语法</h4> + +<pre class="syntaxbox">rotate(<em>a</em>) +</pre> + +<h4 id="参数_3">参数</h4> + +<dl> + <dt><em>a</em></dt> + <dd>该参数表示 {{ cssxref("<angle>") }} 代表旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td> + <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[cos(a) </code><span style="background-color: rgba(212, 221, 228, 0.14902); font-family: consolas,monaco,andale mono,monospace;">sin(</span><em>a</em><span style="background-color: rgba(212, 221, 228, 0.14902); font-family: consolas,monaco,andale mono,monospace;">)</span><code> -sin(a) cos(<em>a</em>) 0 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="rotate3d"><code>rotate3d()</code></h3> + +<p> <code>rotate3d()</code> 这个CSS 函数定义一个3D旋转功能，该旋转使元素能够绕固定轴移动而不变形。 其中移动量由指定角度定义；如果为正值，则运动将为顺时针，如果为负值，则为逆时针。</p> + +<p>在三维空间中，旋转有三个自由度，各表示某条旋转轴。 旋转轴由[x，y，z]向量定义，且过原点（由 {{ cssxref("transform-origin") }} CSS属性定义）。 如果向量没有标准化，即它的三个坐标的平方之和不是1，它将在内部被标准化。 不可标准化的向量，如空向量[0,0,0]，将导致旋转不被应用，但不会影响整个CSS属性。</p> + +<div class="note">注意：相对于平面上的旋转，三维旋转的组成通常不是可交换位置顺序的，这意味着旋转的应用顺序是至关重要的。</div> + +<h4 id="语法_5">语法</h4> + +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +</pre> + +<h4 id="参数_4">参数</h4> + +<dl> + <dt><em>x</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值， 描述旋转轴向量的x坐标 。</dd> + <dt><em>y</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值，描述旋转轴向量的y坐标。</dd> + <dt><em>z</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值，描述旋转轴向量的z坐标。</dd> + <dt><em>a</em></dt> + <dd>该参数为 {{ cssxref("<angle>") }} 代表旋转的角度 。 正角度表示顺时针旋转，负角度表示逆时针旋转 。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">这个变换是属于 3D 空间的，并不适用于这两种情况。</td> + <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> + <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> + </tr> + </tbody> +</table> + +<h3 id="rotateX"><code>rotateX()</code></h3> + +<p> <code>rotateX()</code> 这个CSS 函数定义了将元素在横坐标上旋转而不使其变形的方法。 其运动的程度由指定的角度来定义；如果是正的，则为顺时针旋转，如果是负的，则是逆时针旋转。</p> + +<p>旋转所经过的原点，由 {{ cssxref("transform-origin") }} CSS属性定义。.</p> + +<p><code>rotateX(a)</code>是 <code>rotate3D(1, 0, 0, a)</code>的简写形式。</p> + +<div class="note">注意： 与平面上的旋转相反，3D旋转的组成通常也是不可交换顺序的；这意味着旋转的应用顺序至关重要。</div> + +<h4 id="语法_6">语法</h4> + +<pre class="syntaxbox">rotateX(<em>a</em>) +</pre> + +<h4 id="参数_5">参数</h4> + +<dl> + <dt><em>a</em></dt> + <dd>该参数为 {{ cssxref("<angle>") }} 代表旋转的角度， 正角表示顺时针旋转，负角表示逆时针旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">这个变换是属于 3D 空间的，并不适用于这两种情况。</td> + <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h3 id="rotateY"><code>rotateY()</code></h3> + +<p> <code>rotateY()</code> 这个CSS 函数定义了将元素在纵坐标上旋转而不使其变形的方法。 其运动的程度由指定的角度来定义；如果是正的，则为顺时针旋转，如果是负的，则是逆时针旋转。</p> + +<p>旋转所经过的原点，由 {{ cssxref("transform-origin") }} CSS属性定义。</p> + +<p><code>rotateY(a)</code> 是 <code>rotate3D(0, 1, 0, a)</code> 的简写形式。</p> + +<div class="note">注意： 与平面上的旋转相反，3D旋转的组成通常也是不可交换顺序的；这意味着旋转的应用顺序至关重要。</div> + +<h4 id="语法_7">语法</h4> + +<pre class="syntaxbox">rotateY(<em>a</em>) +</pre> + +<h4 id="参数_6">参数</h4> + +<dl> + <dt><em>a</em></dt> + <dd>该参数为 {{ cssxref("<angle>") }} 代表旋转的角度， 正角表示顺时针旋转，负角表示逆时针旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">这个变换是属于 3D 空间的，并不适用于这两种情况。</td> + <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h3 id="rotateZ"><code>rotateZ()</code></h3> + +<p> <code>rotateZ()</code>这个CSS 函数定义了将元素在z轴上旋转而不使其变形的方法。 其运动的程度由指定的角度来定义；如果是正的，则为顺时针旋转，如果是负的，则是逆时针旋转。</p> + +<p>旋转所经过的原点，由 {{ cssxref("transform-origin") }} CSS属性定义。</p> + + + +<p><code>rotateZ(a) </code>是 <code>rotate3D(0, 0, 1, a)</code> 的简写形式。</p> + +<div class="note">注意： 与平面上的旋转相反，3D旋转的组成通常也是不可交换顺序的；这意味着旋转的应用顺序至关重要。</div> + +<h4 id="语法_8">语法</h4> + +<pre class="syntaxbox">rotateZ(<em>a</em>) +</pre> + +<h4 id="参数_7">参数</h4> + +<dl> + <dt><em>a</em></dt> + <dd>该参数为 {{ cssxref("<angle>") }} 代表旋转的角度， 正角表示顺时针旋转，负角表示逆时针旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">这个变换是属于 3D 空间的，并不适用于这两种情况。</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h3 id="scale"><code>scale()</code></h3> + +<p><img src="/@api/deki/files/5804/=transform-functions-scale_2_2.png?size=webview" style="float: left; height: 290px; width: 350px;"></p> + +<p>The <code>scale()</code> CSS 函数可改变元素的大小。 它可以增大或减小元素的大小，并且缩放量由矢量定义，并且它可以使在一个方向上比另一个方向更多。</p> + +<p>这种变换的特点是矢量的坐标可定义在每个不同方向上各子完成一定比例缩放。如果矢量的两个坐标相等，则缩放是均匀的或各向同性的，并且元素的形状被保留。在这种情况下，缩放函数定义了一个同调变换。</p> + +<p>当超出 <code>[-1, 1]</code>范围外时，缩放将在坐标方向上放大元素；当在该范围内时，它在该方向收缩元素。当等于1时，它什么也不做，当它为负时，它执行点反射和大小修改。</p> + +<div class="note">注意： <code>scale</code><code>()</code> 函数仅在欧几里德平面(2D)中应用转换。要在空间中进行缩放，必须使用 <code>scale3D()</code> 函数。</div> + +<h4 id="语法_9">语法</h4> + +<pre class="syntaxbox">scale(<em>sx</em>) or +scale(<em>sx</em>, <em>sy</em>) +</pre> + +<h4 id="参数_8">参数</h4> + +<dl> + <dt><em>sx</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值， 代表缩放矢量的横坐标。</dd> + <dt><em>sy</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值，代表缩放矢量的纵坐标 。 如果不存在，则其默认值为 <em><strong>sx</strong></em>，从而导致保持元素形状进行均匀缩放。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[sx 0 0 sy 0 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="scale3d"><code>scale3d()</code></h3> + +<p> <code>scale3d()</code> CSS 函数可改变元素的大小。由于缩放的量由矢量定义，因此可以改变不同方向的尺寸。</p> + +<p><span class="outputBox-2liU7_0">这种变换的特点是矢量的坐标定义在每个方向上完成多少缩放。如果矢量的三个坐标都相等，则缩放是均匀的或各向同性的，并且保持元素形状。在这种情况下，这个缩放函数就是定义了一个同调变换。</span></p> + +<p><span class="outputBox-2liU7_0">当超出[-1，1]的范围之外时，缩放比例将在坐标方向上放大元素；当在[-1，1]范围内时，它在当前方向收缩元素。当等于1时，它什么也不做，当它为负时，它执行点反射和大小修改。</span></p> + +<h4 id="语法_10">语法</h4> + +<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>) +</pre> + +<h4 id="参数_9">参数</h4> + +<dl> + <dt><em>sx</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值， <span class="outputBox-2liU7_0">代表缩放矢量的横坐标。</span></dd> + <dt><em>sy</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值， <span class="outputBox-2liU7_0">代表缩放矢量的纵坐标。</span></dd> + <dt><em>sz</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值， <span class="outputBox-2liU7_0">代表缩放矢量的z轴坐标。</span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">这个变换是属于 3D 空间的，并不适用于这两种情况。</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h3 id="scaleX"><code>scaleX()</code></h3> + +<p><img src="/@api/deki/files/5807/=transform-functions-scaleX_2.png?size=webview" style="float: left; height: 296px; width: 350px;"> <code>scaleX()</code> 这个CSS函数是<span class="outputBox-2liU7_0">用一个常数因子来修改每个单元点的横坐标，在比例因子是1的情况下该函数是恒等变换</span>。 <span class="outputBox-2liU7_0">缩放不是各向同性的，元素的角度也不守恒。</span></p> + +<p><code>scaleX(sx)</code> 是 <code>scale(sx, 1)</code> 和 <code>scale3d(sx, 1, 1)</code> 的简写形式。</p> + +<p><code>scaleX(-1)</code> <span class="outputBox-2liU7_0">表示通过原点的垂直轴定义轴对称（由 </span><code><a href="transform-origin" rel="custom">transform-origin</a></code><span class="outputBox-2liU7_0"> 属性指定）。</span></p> + + + + + +<h4 id="语法_11">语法</h4> + +<pre class="syntaxbox">scaleX(<em>s</em>) +</pre> + +<h4 id="参数_10">参数</h4> + +<dl> + <dt><em>s</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值， <span class="outputBox-2liU7_0">表示在元素的每个点的横坐标上应用的缩放因子。</span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[s 0 0 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="scaleY"><code>scaleY()</code></h3> + +<p><img src="/@api/deki/files/5967/=transform-functions-scaleY_2.png" style="float: left;"></p> + +<p> <code>scaleY()</code> 这个 <span class="outputBox-2liU7_0">CSS函数用一个常数因子修改每个元素点的纵坐标，在比例因子是1的情况下该函数是恒等变换</span>。 <span class="outputBox-2liU7_0">缩放不是各向同性的，元素的角度不守恒。</span></p> + +<p><code>scaleY(sy)</code> 是 <code>scale(1, sy)</code> 和 <code>scale3d(1, sy, 1)</code> 的简写形式。</p> + +<p><code>scaleY(-1)</code> <span class="outputBox-2liU7_0">定义了通过原点的水平轴的轴对称（由 </span><code><a href="transform-origin" rel="custom">transform-origin</a></code><span class="outputBox-2liU7_0"> 属性指定）。</span></p> + +<h4 id="语法_12">语法</h4> + +<pre class="syntaxbox">scaleY(s) +</pre> + +<h4 id="参数_11">参数</h4> + +<dl> + <dt><em>s</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值，<span class="outputBox-2liU7_0">表示在元素的每个点的纵坐标上应用的缩放因子。</span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 s 0 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="scaleZ"><code>scaleZ()</code></h3> + +<p> <code>scaleZ()</code> 这个CSS函数是<span class="outputBox-2liU7_0">用一个常数因子来修改每个单元点的z轴坐标，在比例因子是1的情况下该函数是恒等变换</span>。 <span class="outputBox-2liU7_0">缩放不是各向同性的，元素的角度也不守恒。</span></p> + +<p><code>scaleZ(sz)</code> 是 <code>scale3d(1, 1, sz)</code> 的简写形式。</p> + +<p><code>scaleZ(-1)</code> <span class="outputBox-2liU7_0">定义了通过原点的z轴的轴对称（由 </span><code><a href="transform-origin" rel="custom">transform-origin</a></code><span class="outputBox-2liU7_0"> 属性指定）。</span></p> + +<h4 id="语法_13">语法</h4> + +<pre class="syntaxbox">scaleZ(s) +</pre> + +<h4 id="参数_12">参数</h4> + +<dl> + <dt><em>s</em></dt> + <dd>该参数为 {{cssxref("<number>")}} 类型值，<span class="outputBox-2liU7_0">表示在元素的每个点的z轴坐标上应用的缩放因子。</span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">这个变换是属于 3D 空间的，并不适用于这两种情况。</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h3 id="skew"><code>skew()</code></h3> + +<p> <code>skew()</code> 这个<span class="outputBox-2liU7_0">CSS函数是一种用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远，拉伸的值就越大</span>。</p> + +<h4 id="语法_14">语法</h4> + +<pre class="syntaxbox">skew(<em>ax</em>) <em>或</em> +skew(<em>ax</em>, <em>ay</em>) +</pre> + +<h4 id="参数_13">参数</h4> + +<dl> + <dt><em>ax</em></dt> + <dd>该参数为一个角度 {{ cssxref("<angle>") }} ， <span class="outputBox-2liU7_0">表示用于沿着横坐标扭曲元素的角度</span> 。</dd> + <dt><em>ay</em></dt> + <dd>该参数为一个角度 {{ cssxref("<angle>") }} ， <span class="outputBox-2liU7_0">表示用于沿纵坐标扭曲元素的角度</span> 。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="skewX"><code>skewX()</code></h3> + +<p> <code>skewX()</code> <span class="outputBox-2liU7_0">这个CSS函数是用于水平拉伸，它将元素的每个点在水平方向上扭曲一定角度。这是通过将横坐标增加一个与指定角度成比例的值以及到原点的距离来完成的。离原点越远，拉伸的值就越大。</span></p> + +<h4 class="editable" id="语法_15"><span>语法</span></h4> + +<pre class="syntaxbox">skewX(a) +</pre> + +<h4 id="参数_14">参数</h4> + +<dl> + <dt><em>a</em></dt> + <dd>该参数为一个角度 {{ cssxref("<angle>") }} ， <span class="outputBox-2liU7_0">表示用于沿着横坐标扭曲元素的角度。</span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 tan(a) 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="skewY"><code>skewY()</code></h3> + +<p> <code>skewY()</code> <span class="outputBox-2liU7_0">这个CSS函数是用于垂直拉伸，它将元素的每个点在垂直方向上扭曲一定角度。这是通过将纵坐标增加一个与指定角度成比例的值以及到原点的距离来完成的。离原点越远，拉伸的值就越大。</span></p> + +<h4 class="editable" id="语法_16"><span>语法</span></h4> + +<pre class="syntaxbox">skewY(a) +</pre> + +<h4 id="参数_15">参数</h4> + +<dl> + <dt><em>a</em></dt> + <dd>该参数为一个角度 {{ cssxref("<angle>") }} ，<span class="outputBox-2liU7_0">表示用于沿着纵坐标扭曲元素的角度。</span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 tan(a) 0 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="translate"><code>translate()</code></h3> + +<p><img src="/@api/deki/files/5970/=transform-functions-translate_2.png" style="float: left;"> <code>translate()</code> 这个CSS 函数用于<span class="outputBox-2liU7_0">移动元素在平面上的位置。这种变换的特点是矢量的坐标定义了它在每个方向上的移动量。</span></p> + + + + + + + +<h4 id="语法_17">语法</h4> + +<pre class="syntaxbox">translate(tx) 或 +translate(tx, ty) +</pre> + +<h4 id="参数_16">参数</h4> + +<dl> + <dt><em>tx</em></dt> + <dd>该参数为 {{cssxref("<length>")}} ，表示要移动<span class="outputBox-2liU7_0">矢量的横坐标</span>。</dd> + <dt><em>ty</em></dt> + <dd>该参数为 {{cssxref("<length>")}} ，表示要移动矢量的纵坐标。 如果不写则默认为零，例如 <code>translate(2)</code> 表示 <code>translate(2, 0)</code>。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p><span class="outputBox-2liU7_0">平移不是</span> ℝ<sup>2</sup> <span class="outputBox-2liU7_0">中的线性变换，不能用笛卡尔坐标系中的矩阵表示。</span></p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 tx ty]</code></td> + </tr> + </tbody> +</table> + +<h3 id="translate3d"><code>translate3d()</code></h3> + +<p> <code>translate3d()</code> 这个CSS 函数用于<span class="outputBox-2liU7_0">移动元素在3D空间中的位置。</span> <span class="outputBox-2liU7_0">这种变换的特点是三维矢量的坐标定义了它在每个方向上的移动量。</span></p> + +<h4 id="语法_18">语法</h4> + +<pre class="syntaxbox">translate3d(tx, ty, tz) +</pre> + +<h4 id="参数_17">参数</h4> + +<dl> + <dt><em>tx</em></dt> + <dd>该参数为 {{cssxref("<length>")}} <span class="outputBox-2liU7_0">，代表移动矢量的横坐标。</span></dd> + <dt><em>ty</em></dt> + <dd>该参数为 {{cssxref("<length>")}} ，<span class="outputBox-2liU7_0">代表移动矢量的纵坐标。</span></dd> + <dt><em>tz</em></dt> + <dd>该参数为 {{cssxref("<length>")}} <span class="outputBox-2liU7_0">代表移动矢量的z轴坐标。</span> 该值不能使用百分比 {{cssxref("<percentage>")}} ；如果使用会被认为是无效属性。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>这个变换是属于 3D 空间的，并不适用于这两种情况。</p> + </td> + <td colspan="1" rowspan="2"><span class="outputBox-2liU7_0">平移不是</span>ℝ<sup>3</sup><span class="outputBox-2liU7_0">中的线性变换，不能用笛卡尔坐标系中的矩阵表示。</span></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h3 id="translateX"><code>translateX()</code></h3> + +<p><img src="/@api/deki/files/5972/=transform-functions-translateX_2.png" style="float: left;"> <code>translateX()</code> 这个CSS 函数用于<span class="outputBox-2liU7_0">在平面上水平移动元素</span>。 <span class="outputBox-2liU7_0">这个转换的特点是 </span>{{cssxref("<length>")}} <span class="outputBox-2liU7_0">定义了它的水平移动量。</span></p> + +<p><code>translateX(tx)</code> 是 <code>translate(tx, 0) </code>的简写形式。</p> + +<h4 id="语法_19">语法</h4> + +<pre class="syntaxbox">translateX(t) +</pre> + +<h4 id="参数_18">参数</h4> + +<dl> + <dt><em>t</em></dt> + <dd>该参数为 {{cssxref("<length>")}} ，<span class="outputBox-2liU7_0">代表移动矢量的横坐标。</span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 t 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="translateY"><code>translateY()</code></h3> + +<p><img src="/@api/deki/files/5971/=transform-functions-translateY_2.png" style="float: left;"> <code>translateY()</code> 这个CSS 函数用于<span class="outputBox-2liU7_0">在平面上垂直移动元素</span>。 <span class="outputBox-2liU7_0">这个转换的特点是通过 </span>{{cssxref("<length>")}} <span class="outputBox-2liU7_0">定义了它的垂直移动量。</span></p> + +<p><code>translateY(ty)</code> 是 <code>translate(0, ty)</code>的简写形式。</p> + + + +<h4 id="语法_20">语法</h4> + +<pre class="syntaxbox">translateY(t) +</pre> + +<h4 id="参数_19">参数</h4> + +<dl> + <dt><em>t</em></dt> + <dd>该参数为 {{cssxref("<length>")}} <span class="outputBox-2liU7_0">代表移动矢量的横坐标。该参数不能使用百分比</span> {{cssxref("<percentage>")}} ；如果使用百分比形式，会被认为是无效参数。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 0 t]</code></td> + </tr> + </tbody> +</table> + +<h3 id="translateZ"><code>translateZ()</code></h3> + +<p> <code>translateZ()</code> 这个CSS 函数用于3D空间的z轴方向移动元素， <span class="outputBox-2liU7_0">这个转换的特点是通过 </span>{{cssxref("<length>")}} <span class="outputBox-2liU7_0">定义了它的z轴方向移动量。</span></p> + +<p><code>translateZ(tz)</code> 是 <code>translate3d(0, 0, tz) </code>的简写形式。</p> + +<h4 id="语法_21">语法</h4> + +<pre class="syntaxbox">translateZ(t) +</pre> + +<h4 id="参数_20">参数</h4> + +<dl> + <dt><em>t</em></dt> + <dd>该参数是 {{cssxref("<length>")}} ，代表<span class="outputBox-2liU7_0">移动矢量的z轴坐标。</span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">这个变换是属于 3D 空间的，并不适用于这两种情况。</td> + <td colspan="1" rowspan="2">A translation is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/css/transform-function/matrix()/index.html b/files/zh-cn/web/css/transform-function/matrix()/index.html new file mode 100644 index 0000000000..61a7db5124 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/matrix()/index.html @@ -0,0 +1,84 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +translation_of: Web/CSS/transform-function/matrix() +--- +<p>CSS函数 <code>matrix()</code> 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。</p> + +<p><code>matrix(a, b, c, d, tx, ty)</code> 是 <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code> 的简写。</p> + +<div class="note"><strong>注意:</strong> 直到 Firefox 16, Gecko 才接受对于 <strong>tx</strong> 和<strong> ty </strong>的 {{cssxref("<length>")}} 值.</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>) +</pre> + +<h2 id="参数值">参数值</h2> + +<dl> + <dt><em>a</em> <em>b</em> <em>c</em> <em>d</em></dt> + <dd>描述线性变换的 {{cssxref("<number>")}} 。</dd> + <dt><em>tx</em> <em>ty</em></dt> + <dd>描述如何应用这个变换的 {{cssxref("<number>")}} 。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2 </sup>下的<a href="https://zh.wikipedia.org/wiki/%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB">笛卡尔坐标</a></th> + <th scope="col">ℝℙ<sup>2 </sup>下<a href="https://zh.wikipedia.org/wiki/%E9%BD%90%E6%AC%A1%E5%9D%90%E6%A0%87">齐次坐标</a></th> + <th scope="col">ℝ<sup>3</sup>下的<a href="https://zh.wikipedia.org/wiki/%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB">笛卡尔坐标</a></th> + <th scope="col">ℝℙ<sup>3</sup>下的<a href="https://zh.wikipedia.org/wiki/%E9%BD%90%E6%AC%A1%E5%9D%90%E6%A0%87">齐次坐标</a></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td> + <td> + <p><math> <mfenced> <mtable> <mtr><mtd></mtd></mtr></mtable></mfenced></math><br> + a c tx<br> + b d ty<br> + 0 0 1</p> + </td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd></mtd></mtr>a c tx</mtable></mfenced></math><br> + b d ty<br> + 0 0 1<mtr><mtd></mtd></mtr> </td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[a b c d tx ty]</code></td> + </tr> + </tbody> +</table> + +<p>这些值表示以下函数:</p> + +<p>matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )</p> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="notranslate"><div>Normal</div> +<div class="changed">Changed</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.changed { + transform: matrix(1, 2, -1, 1, 80, 80); + background-color: pink; +} + +</pre> + +<h3 id="结果">结果</h3> + +<p>请看英文版案例 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix#Result">https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix#Result</a></p> diff --git a/files/zh-cn/web/css/transform-function/matrix3d()/index.html b/files/zh-cn/web/css/transform-function/matrix3d()/index.html new file mode 100644 index 0000000000..2b25617047 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/matrix3d()/index.html @@ -0,0 +1,153 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d() +translation_of: Web/CSS/transform-function/matrix3d() +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a> 函数 <strong><code>matrix3d()</code></strong> 以4x4齐次矩阵的形式定义一个3D转换。其结果是一个 {{cssxref("<transform-function>")}} 数据类型。</p> + +<h2 id="语法">语法</h2> + +<p><code>matrix3d()</code> 函数由16个参数指定. 这些参数以列为主的顺序进行描述。</p> + +<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><var>a1</var> <var>b1</var> <var>c1</var> <var>d1</var> <var>a2</var> <var>b2</var> <var>c2</var> <var>d2</var> <var>a3</var> <var>b3</var> <var>c3</var> <var>d3</var></dt> + <dd>Are {{cssxref("<number>")}}s describing the linear transformation.</dd> + <dt><var>a4</var> <var>b4</var> <var>c4 d4</var></dt> + <dd>Are {{cssxref("<number>")}}s describing the translation to apply.</dd> +</dl> + +<div class="note"><strong>Note:</strong> Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for <var>a4</var>, <var>b4</var> and <var>c4</var>.</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">This transformation applies to the 3D space and can't be represented on the plane.</td> + <td colspan="1" rowspan="2">A generic 3D <a href="https://en.wikipedia.org/wiki/Affine_transformation">affine transformation</a> can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations.</td> + <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Matrix_translation_and_scale_example">Matrix translation and scale example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">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 + ) + } +}</pre> + +<h3 id="Result">Result</h3> + +<div>{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> data type for compatibility info.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/perspective()/index.html b/files/zh-cn/web/css/transform-function/perspective()/index.html new file mode 100644 index 0000000000..833023d9c3 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/perspective()/index.html @@ -0,0 +1,46 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +translation_of: Web/CSS/transform-function/perspective() +--- +<div>{{CSSRef}}</div> + +<div>透视函数定义了到z=0的坐标轴，使用者能够得到3D定位元素的透视，每个3D元素在Z轴的位置大于零意味着离使用者更近，因此会变得更大，同理当元素Z周小于零时会变得ge</div> + +<p>T更小，变化的幅度决定于属性值的变化大小 </p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">perspective(l) +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><em>l</em></dt> + <dd>这个{{cssxref("<length>")}} 得到的是距离0坐标的距离. 被用作提供一个透视渐变属性给某个元素. 如果这个值是0或者不合法的值，将不会产生透视的变化.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>这个属性变化提供了一个3D空间，并且不会变成平面类型</p> + </td> + <td colspan="1" rowspan="2">A perspective is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p>TBD</p> diff --git a/files/zh-cn/web/css/transform-function/rotate()/index.html b/files/zh-cn/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..a412aa9362 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotate()/index.html @@ -0,0 +1,90 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +tags: + - CSS + - CSS函数 + - CSS变换 +translation_of: Web/CSS/transform-function/rotate() +--- +<div>{{CSSRef}}</div> + +<div>CSS的<strong><code>rotate()</code></strong>函数定义了一种将元素围绕一个定点（由{{ Cssxref("transform-origin") }}属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。</div> + +<div></div> + +<p>元素旋转的固定点 - 如上所述 - 也称为<strong>变换原点</strong>。这默认为元素的中心，但你可以使用{{ cssxref("transform-origin") }}属性设置自己的自定义变换原点。</p> + +<h2 id="语法">语法</h2> + +<p>{{cssxref("<angle>")}} 指定了 <code>rotate()</code> 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为<em>点反演</em>。</p> + +<pre class="syntaxbox notranslate">rotate(<em>a</em>) +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><em>a</em></dt> + <dd>是一种{{ cssxref("<angle>") }}，表示旋转的角度。 正角度表示了顺时针的旋转，负角度表示逆时针的旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"> + <p>笛卡尔坐标系 on ℝ<sup>2</sup></p> + </th> + <th scope="col">齐次坐标系 on ℝℙ<sup>2</sup></th> + <th scope="col">笛卡尔坐标系 on ℝ<sup>3</sup></th> + <th scope="col">齐次坐标系 on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td> + <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate(45deg); /* Equal to rotateZ(45deg) */ + background-color: pink; +}</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例","100%","200")}}</p> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>有关兼容性信息，请参阅<code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code>数据类型。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/rotate3d()/index.html b/files/zh-cn/web/css/transform-function/rotate3d()/index.html new file mode 100644 index 0000000000..9eea1570ba --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotate3d()/index.html @@ -0,0 +1,125 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d() +tags: + - 3D + - CSS + - CSS Transforms +translation_of: Web/CSS/transform-function/rotate3d() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>rotate3d()</code></strong> CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。</p> + +<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div> + + + +<p>在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 {{ cssxref("transform-origin") }} CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果（译者注：如transform中的多项变换）。</p> + +<div class="note">与平面旋转相反的是，3D旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><em>x</em></dt> + <dd> {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。</dd> + <dt><em>y</em></dt> + <dd>{{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。</dd> + <dt><em>z</em></dt> + <dd>{{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。</dd> + <dt><em>a</em></dt> + <dd> {{ cssxref("<angle>") }} 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">笛卡尔坐标 on ℝ<sup>2</sup></th> + <th scope="col">齐次坐标 on ℝℙ<sup>2</sup></th> + <th scope="col">笛卡尔坐标 on ℝ<sup>3</sup></th> + <th scope="col">齐次坐标 on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">这种变换应用于3D空间，不可用于平面空间</td> + <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> + <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="绕Y轴旋转">绕Y轴旋转</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(0, 1, 0, 60deg); + background-color: pink; +}</pre> + +<h4 id="效果">效果</h4> + +<p>{{EmbedLiveSample("绕Y轴旋转","100%","200")}}</p> + +<h3 id="围绕自定义轴旋转">围绕自定义轴旋转</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(1, 2, -1, 192deg); + background-color: pink; +}</pre> + +<h4 id="效果_2">效果</h4> + +<p>{{EmbedLiveSample("围绕自定义轴旋转","100%","200")}}</p> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>有关兼容性信息，请参阅<code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 数据类型。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/rotatex()/index.html b/files/zh-cn/web/css/transform-function/rotatex()/index.html new file mode 100644 index 0000000000..eda2306e00 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatex()/index.html @@ -0,0 +1,107 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX() +translation_of: Web/CSS/transform-function/rotateX() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>rotateX() </code></strong>函数定义了一个转换，它可以让一个元素围绕横坐标(水平轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div> + + + +<p>旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。</p> + +<div class="note"> +<p><strong>注意:</strong> <code>rotateX(a)</code> 相当于 <code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(1, 0, 0, a)</code>.</p> +</div> + +<div class="note"><strong>注意:</strong> 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。</div> + +<h2 id="语法">语法</h2> + +<p><strong><code>rotateX() </code></strong>引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。</p> + +<pre class="syntaxbox">rotateX(<em>a</em>) +</pre> + +<h3 id="参数值">参数值</h3> + +<dl> + <dt><code>a</code></dt> + <dd><code>a</code> 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">笛卡儿坐标 ℝ<sup>2</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>2</sup></th> + <th scope="col">笛卡儿坐标 ℝ<sup>3</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">This transformation applies to the 3D space and can't be represented on the plane.</td> + <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateX(45deg); + background-color: pink; +} +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例", "auto", 180)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>有关兼容性信息，请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 的数据类型。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/rotatey()/index.html b/files/zh-cn/web/css/transform-function/rotatey()/index.html new file mode 100644 index 0000000000..b051527444 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatey()/index.html @@ -0,0 +1,107 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY() +translation_of: Web/CSS/transform-function/rotateY() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>rotateY()</code></strong> 函数定义了一个转换，它可以让一个元素围绕纵坐标(垂直轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}} 数据类型。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div> + + + +<p>旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。</p> + +<div class="note"> +<p><strong>注意:</strong> <code>rotateY(a)</code> 相当于 <code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 1, 0, a)</code>.</p> +</div> + +<div class="note"><strong>注意:</strong> 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。</div> + +<h2 id="语法">语法</h2> + +<p><strong><code>rotateY() </code></strong>引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。</p> + +<pre class="syntaxbox">rotateY(<em>a</em>) +</pre> + +<h3 id="参数值">参数值</h3> + +<dl> + <dt><code>a</code></dt> + <dd><code>a</code> 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">笛卡儿坐标 ℝ<sup>2</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>2</sup></th> + <th scope="col">笛卡儿坐标 ℝ<sup>3</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">This transformation applies to the 3D space and can't be represented on the plane.</td> + <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateY(60deg); + background-color: pink; +} +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例", "auto", 180)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>有关兼容性信息，请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 的数据类型。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/rotatez()/index.html b/files/zh-cn/web/css/transform-function/rotatez()/index.html new file mode 100644 index 0000000000..b7fc6b5da2 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatez()/index.html @@ -0,0 +1,107 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ() +translation_of: Web/CSS/transform-function/rotateZ() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>rotateZ() </code></strong>函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div> + + + +<p>旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。</p> + +<div class="note"> +<p><strong>注意:</strong> <code>rotateZ(a)</code> 相当于 <code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate</a>(a)</code> or <code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 0, 1, a)</code>。</p> +</div> + +<div class="note"><strong>注意:</strong> 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。</div> + +<h2 id="语法">语法</h2> + +<p><strong><code>rotateZ() </code></strong>引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。</p> + +<pre class="syntaxbox">rotateZ(<em>a</em>) +</pre> + +<h3 id="参数值">参数值</h3> + +<dl> + <dt><code>a</code></dt> + <dd><code>a</code> 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">笛卡儿坐标 ℝ<sup>2</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>2</sup></th> + <th scope="col">笛卡儿坐标 ℝ<sup>3</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">This transformation applies to the 3D space and can't be represented on the plane.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateZ(45deg); + background-color: pink; +} +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例", "auto", 180)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>有关兼容性信息，请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 的数据类型。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/scale()/index.html b/files/zh-cn/web/css/transform-function/scale()/index.html new file mode 100644 index 0000000000..b025b5c5a0 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scale()/index.html @@ -0,0 +1,111 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale() +translation_of: Web/CSS/transform-function/scale() +--- +<div>{{CSSRef}}</div> + +<p>CSS 函数 <code>scale()</code> 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。</p> + +<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p> + +<p>该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。</p> + +<p>当坐标值处于区间 [<code>-1, 1]</code> 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行<em>像素点反射</em>之后再进行大小的修改。</p> + +<div class="note"><code>scale</code><code>()</code> 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 <code>scale3D()</code> 。</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: css">scale(<em>sx</em>)</pre> + +<p class="syntaxbox">或</p> + +<pre class="brush: css">scale(<em>sx</em>, <em>sy</em>)</pre> + +<h2 id="值">值</h2> + +<dl> + <dt><em>sx</em></dt> + <dd>{{cssxref("<number>")}}，表示缩放向量的横坐标。</dd> + <dt><em>sy</em></dt> + <dd>{{cssxref("<number>")}} ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 <em><strong>sx</strong></em>。 从而使得元素在保持原有形状下均等缩放</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup>上的笛卡尔坐标变换</th> + <th scope="col">ℝℙ<sup>2</sup>上的齐次坐标变换</th> + <th scope="col">ℝ<sup>3</sup>上的笛卡尔坐标变换</th> + <th scope="col">ℝℙ<sup>3</sup>上的齐次坐标变换</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[sx 0 0 sy 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="单一维度缩放">单一维度缩放</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed { + /* 等同于变换: scaleX(2) scaleY(2);*/ + transform: scale(2); + background-color: blue; +} +</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("单一维度缩放","100%","200")}}</p> + +<h3 id="在X和Y两个维度缩放并移动缩放中心">在X和Y两个维度缩放并移动缩放中心</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>foo</p> +<p class="transformed">bar</p> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: 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; +} +</pre> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample("在X和Y两个维度缩放并移动缩放中心","100%","200")}}</p> diff --git a/files/zh-cn/web/css/transform-function/scalex()/index.html b/files/zh-cn/web/css/transform-function/scalex()/index.html new file mode 100644 index 0000000000..c5a34d3e40 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scalex()/index.html @@ -0,0 +1,109 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX() +tags: + - axial symmetry + - scaleX() + - scaleX(-1) +translation_of: Web/CSS/transform-function/scaleX() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>scaleX()</code></strong> CSS 函数将每个元素点的横坐标修改为一个常数因子，除了该比例因子为1，在这种情况下，函数是身份变换。 缩放不是各向同性的，并且元素的角度不保守。</p> + +<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p> + +<p><code>scaleX(sx)</code> 是 <code>scale(sx, 1)</code> 或 <code>scale3d(sx, 1, 1) </code>的一个速记/缩写。</p> + +<div class="note"> +<p>Note:</p> + +<p><strong><code>scaleX(-1)</code> </strong>定义一个 <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">轴向对称性(axial symmetry)</a> ，它具有一个垂直轴通过原点 (由 {{cssxref("transform-origin")}} 属性规定)。</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">scaleX(<em>s</em>) +</pre> + +<h2 id="Values">Values</h2> + +<dl> + <dt><em>s</em></dt> + <dd>Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[s 0 0 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="Without_changing_the_origin">Without changing the origin</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed { + transform: scaleX(2); + background-color: blue; +} +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}</p> + +<h3 id="Translating_the_origin_of_the_transformation">Translating the origin of the transformation</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed { + transform: scaleX(2); + transform-origin: left; + background-color: blue; +} +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}</p> diff --git a/files/zh-cn/web/css/transform-function/scaley()/index.html b/files/zh-cn/web/css/transform-function/scaley()/index.html new file mode 100644 index 0000000000..4c690dcbbe --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scaley()/index.html @@ -0,0 +1,91 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY() +tags: + - 'transform: rotateX(180deg);' + - 'transform: scaleY(-1);' +translation_of: Web/CSS/transform-function/scaleY() +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>scaleY()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> function defines a transformation that resizes an element along the y-axis (vertically). Its result is a {{cssxref("<transform-function>")}} data type.</p> + +<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p> + +<p>It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. <code>scaleY(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a>, with a horizontal axis passing through the origin (as specified by the {{cssxref("transform-origin")}} property).</p> + +<div class="note"> +<p><strong>Note:</strong> <code>scaleY(sy)</code> is equivalent to <code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale</a>(1, sy)</code> or <code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d</a>(1, sy, 1)</code>.</p> + +<p><code>transform: rotateX(180deg);</code> === <code>transform: scaleY(-1);</code></p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">scaleY(s) +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>s</code></dt> + <dd>Is a {{cssxref("<number>")}} representing the scaling factor to apply on the ordinate of each point of the element.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 s 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="scaled">Scaled</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleY(0.6); + background-color: pink; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", 200, 200)}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> data type for compatibility info.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/skew()/index.html b/files/zh-cn/web/css/transform-function/skew()/index.html new file mode 100644 index 0000000000..6d5f1f4bf5 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skew()/index.html @@ -0,0 +1,139 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew() +tags: + - CSS + - CSS变形 + - CSS方法 + - 引用 +translation_of: Web/CSS/transform-function/skew() +--- +<div>{{CSSRef}}</div> + +<div><strong><code>skew() </code></strong>函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("<transform-function>")}} 数据类型</div> + +<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div> + +<p class="hidden">这个资源的交互案例在GitHub库中，如果您想贡献一个交互的案例，请克隆<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>并且通过提交pull request给我们。</p> + +<p>这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。</p> + +<h2 id="语法">语法</h2> + +<p> <code>skew()</code> 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。</p> + +<pre class="syntaxbox">skew(<em>ax</em>) + +skew(<em>ax</em>, <em>ay</em>) +</pre> + +<h3 id="参数值">参数值</h3> + +<dl> + <dt><code>ax</code></dt> + <dd><code>ax</code> 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。</dd> + <dt><code>ay</code></dt> + <dd><code>ay</code> 是一个 {{cssxref("<angle>")}} ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">笛卡儿坐标 ℝ<sup>2</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>2</sup></th> + <th scope="col">笛卡儿坐标 ℝ<sup>3</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">示例</h2> + +<h3 id="Using_a_single_x-angle" name="Using_a_single_x-angle">使用单个参数</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><code><div>Normal</div> +<div class="skewed">Skewed</div></code></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css"><code>div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg); /* Equal to skewX(10deg) */ + background-color: pink; +}</code></pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}</p> + +<h3 id="Using_two_angles" name="Using_two_angles">使用两个参数</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><code><div>Normal</div> +<div class="skewed">Skewed</div></code></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css"><code>div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg, 10deg); + background-color: pink; +}</code></pre> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample("Using_two_angles", 200, 200)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>有关兼容性信息，请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 的数据类型。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/skewx()/index.html b/files/zh-cn/web/css/transform-function/skewx()/index.html new file mode 100644 index 0000000000..8069ddb912 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skewx()/index.html @@ -0,0 +1,107 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX() +translation_of: Web/CSS/transform-function/skewX() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>skewX()</code></strong> 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div> + + + +<p>这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。</p> + +<div class="note"> +<p><strong>注意:</strong> <code>skewX(a)</code> 相当于 <code><a href="/en-US/docs/Web/CSS/transform-function/skew">skew</a>(a)</code>。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">skewX(a) +</pre> + +<h3 id="参数值">参数值</h3> + +<dl> + <dt><code>a</code></dt> + <dd><code>a</code> 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">笛卡儿坐标 ℝ<sup>2</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>2</sup></th> + <th scope="col">笛卡儿坐标 ℝ<sup>3</sup></th> + <th scope="col">齐次坐标 ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 tan(a) 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="skewed">Skewed</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewX(10deg); /* Equal to skew(10deg) */ + background-color: pink; +} +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例", 200, 200)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>有关兼容性信息，请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 的数据类型。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/skewy()/index.html b/files/zh-cn/web/css/transform-function/skewy()/index.html new file mode 100644 index 0000000000..7362f1ce01 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skewy()/index.html @@ -0,0 +1,130 @@ +--- +title: skewY() +slug: Web/CSS/transform-function/skewY() +translation_of: Web/CSS/transform-function/skewY() +--- +<div> +<p>{{CSSRef}}</p> + +<p><strong><code>skewY()</code></strong> 函数定义了一个转换，该转换将元素倾斜到二维平面上的垂直方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。</p> + +<p>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</p> + +<p>这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">skewY(a) +</pre> + +<h3 id="参数值">参数值</h3> + +<dl> + <dt><code>a</code></dt> +</dl> + +<dl> + <dd><code>a</code> 是一个 {{cssxref("<angle>")}}，表示元素沿纵坐标扭曲的角度。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">实坐标系 ℝ<sup>2</sup></th> + <th scope="col">齐次坐标系ℝℙ<sup>2</sup></th> + <th scope="col">实坐标系 ℝ<sup>3</sup></th> + <th scope="col">齐次坐标系ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p><math> <mfenced><mtable><mtr>1 <mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr></mtable></mfenced></math><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>tan(ax) <mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + <td> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>tan(ax) <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 1</mtd></mtr></mtable> </mfenced></math></p> + </td> + <td colspan="1" rowspan="2"> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>tan(ax) <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + <td colspan="1" rowspan="2"> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>tan(ax) <mtd>1 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + </tr> + <tr> + <td><code>[1 tan(a) 0 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed { + transform: skewY(40deg); + background-color: blue; +} +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例","100%","250")}}</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>有关兼容性信息，请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 的数据类型。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/translate()/index.html b/files/zh-cn/web/css/transform-function/translate()/index.html new file mode 100644 index 0000000000..a9d5e07535 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translate()/index.html @@ -0,0 +1,152 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate() +tags: + - CSS + - CSS Function + - CSS Transforms + - Reference +translation_of: Web/CSS/transform-function/translate() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>translate()</code></strong> 这个 <a href="/en-US/docs/Web/CSS">CSS</a> 函数在水平和/或垂直方向上重新定位元素。 其结果是 {{cssxref("<transform-function>")}} 类型。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p> + +<p>该变换由二维向量构成。 它的坐标定义了元素在每个方向上移动了多少。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: css notranslate">/* 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%); +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt>单个 <code><length-percentage></code> 作为参数</dt> + <dd>该值是 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 代表翻译向量的横坐标 (horizontal, x-coordinate) . 而向量的纵坐标 (vertical, y-coordinate) 会被默认为 <code>0</code>. 例如, <code>translate(2)</code> 等价于 <code>translate(2, 0)</code> 。 里面还可以填百分比值，百分比值是指 {{cssxref("transform-box")}} 属性定义的参考框的宽度。</dd> + <dt>参数是两个 <code><length-percentage></code> 构成</dt> + <dd>此值描述两个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 值，分别代表翻译的横坐标 (x-coordinate) 和纵坐标 (y-coordinate) 向量。 百分比作为第一个值表示宽度，第二个部分表示由 {{cssxref("transform-box")}} 属性定义的参考框的高度。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>平移不是 ℝ<sup>2</sup> 中的线性变换，因此不能使用矩阵来表示。</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 tx ty]</code></td> + </tr> + </tbody> +</table> + +<h3 id="形式语法">形式语法</h3> + +<pre class="syntaxbox notranslate">translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}<a href="/en-US/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>) +</pre> + +<h2 id="例子">例子</h2> + +<h3 id="使用单个轴平移">使用单个轴平移</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* Equal to: translateX(10px) or translate(10px, 0) */ + background-color: pink; +} +</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p> + +<h3 id="y轴和x轴都平移">y轴和x轴都平移</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +</pre> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</p> + +<h2 id="规格">规格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术规格</th> + <th scope="col">状态</th> + <th scope="col">注解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 数据类型以获取兼容性信息。</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/translate3d()/index.html b/files/zh-cn/web/css/transform-function/translate3d()/index.html new file mode 100644 index 0000000000..ca01d9c4ea --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translate3d()/index.html @@ -0,0 +1,138 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d() +tags: + - CSS + - CSS 函数 + - CSS 变换 + - 参考 +translation_of: Web/CSS/transform-function/translate3d() +--- +<div>{{CSSRef}}</div> + +<p><code>translate3d()</code> CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">translate3d(tx, ty, tz)</pre> + +<dl> + <dt> + <h2 id="常量">常量</h2> + </dt> + <dt><em>tx</em></dt> + <dd>是一个 {{cssxref("<length>")}} 代表移动向量的横坐标。</dd> + <dt><em>ty</em></dt> + <dd>是一个{{cssxref("<length>")}} 代表移动向量的纵坐标。</dd> + <dt><em>tz</em></dt> + <dd>是一个 {{cssxref("<length>")}} 代表移动向量的z坐标。它不能是{{cssxref("<percentage>")}} 值；那样的移动是没有意义的。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p> 此变换适用于3D空间，并不适用于这两种情况。</p> + </td> + <td colspan="1" rowspan="2"> + <p>平移不是ℝ<sup>3</sup>中的线性变换，不能使用笛卡尔坐标矩阵表示。</p> + </td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="单轴变化示例">单轴变化示例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>foo</p> +<p class="transformed">bar</p> +<p>foo</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">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; +}</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Using_a_single_axis_translation","100%","250")}}</p> + +<h3 id="z轴与x轴变化">z轴与x轴变化</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>foo</p> +<p class="transformed">bar</p> +<p>foo</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed { + transform: perspective(500px) translate3d(10px,0px,100px); + background-color: blue; +}</pre> + +<h3 id="结果_2">结果</h3> + +<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}</p> + +<p> </p> + +<h2 id="规格">规格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>有关兼容性信息，请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a>的兼容性信息。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> + +<p> </p> diff --git a/files/zh-cn/web/css/transform-function/translatex/index.html b/files/zh-cn/web/css/transform-function/translatex/index.html new file mode 100644 index 0000000000..16047b2fc6 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translatex/index.html @@ -0,0 +1,129 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS函数 + - CSS变形属性 + - 参考 +translation_of: Web/CSS/transform-function/translateX +--- +<div>{{CSSRef}}</div> + +<p>translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。</p> + +<p><img src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p> + +<div class="note"> +<p><strong>注意</strong>： <code>translateX(tx)</code>等同于 <a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0) 或者 <a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">translateX(t) +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>t</code></dt> + <dt> 代表了向量平移的横坐标长度{{cssxref("<length>")}}。</dt> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup>空间中的笛卡尔坐标</th> + <th scope="col">在ℝℙ<sup>2</sup>上的投影坐标</th> + <th scope="col">在ℝ<sup>3</sup>上的笛卡尔坐标</th> + <th scope="col">在ℝℙ<sup>3</sup>上的投影坐标</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>在ℝ<sup>2 </sup>空间中的平移并非线性变化，因此不能表示为笛卡尔坐标矩阵。</p> + </td> + <td> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + <td colspan="1" rowspan="2"> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + <td colspan="1" rowspan="2"> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + </tr> + <tr> + <td><code>[1 0 0 1 t 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><code><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css"><code>div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* 等同于 translate(10px) */ + background-color: pink; +}</code></pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> + +<h2 id="标准化说明">标准化说明</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">标准</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>原始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/translatey()/index.html b/files/zh-cn/web/css/transform-function/translatey()/index.html new file mode 100644 index 0000000000..3c210ee62e --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translatey()/index.html @@ -0,0 +1,115 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY() +translation_of: Web/CSS/transform-function/translateY() +--- +<div>{{CSSRef}}</div> + +<p><code>translateY()</code> 在页面垂直移动元素，结果是 CSS 数据类型 {{cssxref("<transform-function>")}}。</p> + +<p><img src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p> + +<div class="note"> +<p><strong>注意:</strong> <code>translateY(ty)</code> 对应 <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(0, ty)</code> 或<code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, ty, 0)</code>。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="notranslate"><code>/* <length-percentage> values */ +transform: translateY(200px); +transform: translateY(50%);</code></pre> + +<h2 id="值">值</h2> + +<dl> + <dd>{{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 表示变换向量的纵坐标。百分比指的是盒子高度，盒子由属性 {{cssxref("transform-box")}} 定义。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">笛卡尔坐标 ℝ<sup>2</sup></th> + <th scope="col"> + <p>在ℝℙ<sup>2</sup>上的同类坐标</p> + </th> + <th scope="col"> + <p>在ℝ<sup>3</sup>上的笛卡尔坐标</p> + </th> + <th scope="col"> + <p>在ℝℙ<sup>3</sup>同类坐标</p> + </th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>在ℝ<sup>2 </sup>上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 0 t]</code></td> + </tr> + </tbody> +</table> + +<h3 id="语法_2">语法</h3> + +<pre class="notranslate">translateY({{cssxref("<length-percentage>")}})</pre> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="notranslate"><code><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="notranslate"><code>div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(10px); + background-color: pink; +}</code></pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col"><strong>规范</strong></th> + <th scope="col"><strong>状态</strong></th> + <th scope="col"><strong>注释</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>请查看 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code>。</p> + +<h2 id="了解更多">了解更多</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> |