aboutsummaryrefslogtreecommitdiff
path: root/files/vi/web/css/transform-function
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/vi/web/css/transform-function
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/vi/web/css/transform-function')
-rw-r--r--files/vi/web/css/transform-function/index.html160
-rw-r--r--files/vi/web/css/transform-function/perspective()/index.html153
2 files changed, 0 insertions, 313 deletions
diff --git a/files/vi/web/css/transform-function/index.html b/files/vi/web/css/transform-function/index.html
deleted file mode 100644
index 2237c7c1fb..0000000000
--- a/files/vi/web/css/transform-function/index.html
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: <transform-function>
-slug: Web/CSS/transform-function
-tags:
- - CSS
- - CSS Data Type
- - CSS Transforms
- - Layout
- - NeedsTranslation
- - Reference
- - TopicStub
-translation_of: Web/CSS/transform-function
----
-<div>{{CSSRef}}</div>
-
-<p>The <strong><code>&lt;transform-function&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p>
-
-<h2 id="Describing_transformations_mathematically">Describing transformations mathematically</h2>
-
-<p>Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a>, although <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> are also sometimes used.</p>
-
-<h3 id="Cartesian_coordinates"><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>Cartesian coordinates</h3>
-
-<p>In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation <code>(x, y)</code>.</p>
-
-<p>In CSS (and most computer graphics), the origin <code>(0, 0)</code> represents the<em> top-left</em> corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be <code>(2, 5)</code>, while a point 3 units to the left and 12 units up would be <code>(-3, -12)</code>.</p>
-
-<h3 id="Transformation_functions">Transformation functions</h3>
-
-<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:</p>
-
-<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> </math></p>
-
-<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p>
-
-<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p>
-
-<p>It is even possible to apply several transformations in a row:</p>
-
-<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p>
-
-<p>With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p>
-
-<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p>
-
-<div class="note">
-<p><strong>Note:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3×3 transformation matrices, and can simply express translations as linear functions.</p>
-</div>
-
-<h2 id="Syntax">Syntax</h2>
-
-<p>The <code>&lt;transform-function&gt;</code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p>
-
-<h3 id="Matrix_transformation">Matrix transformation</h3>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt>
- <dd>Describes a homogeneous 2D transformation matrix.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt>
- <dd>Describes a 3D transformation as a 4×4 homogeneous matrix.</dd>
-</dl>
-
-<h3 id="Perspective">Perspective</h3>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt>
- <dd>Sets the distance between the user and the z=0 plane.</dd>
-</dl>
-
-<h3 id="Rotation">Rotation</h3>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt>
- <dd>Rotates an element around a fixed point on the 2D plane.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt>
- <dd>Rotates an element around a fixed axis in 3D space.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt>
- <dd>Rotates an element around the horizontal axis.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt>
- <dd>Rotates an element around the vertical axis.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt>
- <dd>Rotates an element around the z-axis.</dd>
-</dl>
-
-<h3 id="Scaling_resizing">Scaling (resizing)</h3>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale()</a></code></dt>
- <dd>Scales an element up or down on the 2D plane.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></dt>
- <dd>Scales an element up or down in 3D space.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt>
- <dd>Scales an element up or down horizontally.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt>
- <dd>Scales an element up or down vertically.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt>
- <dd>Scales an element up or down along the z-axis.</dd>
-</dl>
-
-<h3 id="Skewing_distortion">Skewing (distortion)</h3>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skew">skew()</a></code></dt>
- <dd>Skews an element on the 2D plane.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt>
- <dd>Skews an element in the horizontal direction.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt>
- <dd>Skews an element in the vertical direction.</dd>
-</dl>
-
-<h3 id="Translation_moving">Translation (moving)</h3>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate()</a></code></dt>
- <dd>Translates an element on the 2D plane.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt>
- <dd>Translates an element in 3D space.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt>
- <dd>Translates an element horizontally.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt>
- <dd>Translates an element vertically.</dd>
- <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt>
- <dd>Translates an element along the z-axis.</dd>
-</dl>
-
-<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', '#transform-functions', '&lt;transform-function&gt;')}}</td>
- <td>{{Spec2('CSS Transforms 2')}}</td>
- <td>Added 3D transform functions.</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Transforms', '#transform-functions', '&lt;transform-function&gt;')}}</td>
- <td>{{Spec2('CSS3 Transforms')}}</td>
- <td>Initial definition</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-
-
-<p>{{Compat("css.types.transform-function")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>CSS {{cssxref("transform")}} property</li>
-</ul>
diff --git a/files/vi/web/css/transform-function/perspective()/index.html b/files/vi/web/css/transform-function/perspective()/index.html
deleted file mode 100644
index a69e46e094..0000000000
--- a/files/vi/web/css/transform-function/perspective()/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: perspective()
-slug: Web/CSS/transform-function/perspective()
-translation_of: Web/CSS/transform-function/perspective()
----
-<div>{{CSSRef}}</div>
-
-<p>The <strong><code>perspective()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a {{cssxref("&lt;transform-function&gt;")}} data type.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div>
-
-
-
-<p>The <code>perspective()</code> transform function is part of the {{cssxref('transform')}} value applied on the element being transformed. This differs from the {{cssxref('perspective')}} and {{cssxref('perspective-origin')}} properties which are attached to the parent of a child transformed in 3-dimensional space.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<p>The perspective distance used by <code>perspective()</code> is specified by a {{cssxref("&lt;length&gt;")}} value, which represents the distance between the user and the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. A positive value makes the element appear closer to the user than the rest of the interface, a negative value farther. The greater the value, the further away the perspective of the user is.</p>
-
-<pre class="syntaxbox">perspective(d)
-</pre>
-
-<h3 id="Values">Values</h3>
-
-<dl>
- <dt><var>d</var></dt>
- <dd>Is a {{cssxref("&lt;length&gt;")}} representing the distance from the user to the z=0 plane. If it is 0 or a negative value, no perspective transform is applied.</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>This transformation applies to the 3D space and can't be represented on the plane.</p>
- </td>
- <td colspan="1" rowspan="2">This transformation is not a linear transformation in ℝ<sup>3</sup>, and can't be represented using a Cartesian-coordinate matrix.</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>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;Without perspective:&lt;/p&gt;
-&lt;div class="no-perspective-box"&gt;
-  &lt;div class="face front"&gt;A&lt;/div&gt;
-  &lt;div class="face top"&gt;B&lt;/div&gt;
-  &lt;div class="face left"&gt;C&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;p&gt;With perspective (9cm):&lt;/p&gt;
-&lt;div class="perspective-box-far"&gt;
-  &lt;div class="face front"&gt;A&lt;/div&gt;
-  &lt;div class="face top"&gt;B&lt;/div&gt;
-  &lt;div class="face left"&gt;C&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;p&gt;With perspective (4cm):&lt;/p&gt;
-&lt;div class="perspective-box-closer"&gt;
-  &lt;div class="face front"&gt;A&lt;/div&gt;
-  &lt;div class="face top"&gt;B&lt;/div&gt;
-  &lt;div class="face left"&gt;C&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">.face {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  font-size: 100px;
-  text-align: center;
-}
-
-p + div {
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  margin-left: 100px;
-}
-.no-perspective-box {
-  transform: rotateX(-15deg) rotateY(30deg);
-}
-
-.perspective-box-far {
-  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
-}
-
-.perspective-box-closer {
-  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
-}
-
-.top {
-  background-color: skyblue;
-  transform: rotateX(90deg) translate3d(0, 0, 50px);
-}
-
-.left {
-  background-color: pink;
-  transform: rotateY(-90deg) translate3d(0, 0, 50px);
-}
-
-.front {
-  background-color: limegreen;
-  transform: translate3d(0, 0, 50px);
-}
-</pre>
-
-<h3 id="Result">Result</h3>
-
-<p>{{ EmbedLiveSample('Examples', '250', '350') }}</p>
-
-<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-perspective", "perspective()")}}</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">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>