dump 2020-12-11

1 files changed, 295 insertions, 0 deletions

diff --git a/files/de/web/css/transform-function/index.html b/files/de/web/css/transform-function/index.html
new file mode 100644
index 0000000000..7ad06db5c7
--- /dev/null
+++ b/files/de/web/css/transform-function/index.html
@@ -0,0 +1,295 @@
+---
+title: <transform-function>
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Transforms
+  - Data Type
+  - 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 <a href="/en-US/docs/Web/CSS/CSS_Functions">functions</a> can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p>
+
+<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="Description">Description</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">Cartesian coordinates</h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right;"></a></p>
+
+<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="Examples">Examples</h2>
+
+<h3 id="Transform_function_comparison">Transform function comparison</h3>
+
+<p>The following example provides a 3D cube created from DOM elements and transforms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.</p>
+
+<p>Choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts back to its starting state. The cube's starting state is slightly rotated using <code>transform3d()</code>, to allow you to see the effect of all the transforms.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;main&gt;
+  &lt;section id="example-element"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+  &lt;/section&gt;
+
+  &lt;div class="select-form"&gt;
+    &lt;label&gt;Select a transform function&lt;/label&gt;
+    &lt;select&gt;
+      &lt;option selected&gt;Choose a function&lt;/option&gt;
+      &lt;option&gt;rotate(360deg)&lt;/option&gt;
+      &lt;option&gt;rotateX(360deg)&lt;/option&gt;
+      &lt;option&gt;rotateY(360deg)&lt;/option&gt;
+      &lt;option&gt;rotateZ(360deg)&lt;/option&gt;
+      &lt;option&gt;rotate3d(1, 1, 1, 90deg)&lt;/option&gt;
+      &lt;option&gt;scale(1.5)&lt;/option&gt;
+      &lt;option&gt;scaleX(1.5)&lt;/option&gt;
+      &lt;option&gt;scaleY(1.5)&lt;/option&gt;
+      &lt;option&gt;scaleZ(1.5)&lt;/option&gt;
+      &lt;option&gt;scale3d(1, 1.5, 1.5)&lt;/option&gt;
+      &lt;option&gt;skew(17deg, 13deg)&lt;/option&gt;
+      &lt;option&gt;skewX(17deg)&lt;/option&gt;
+      &lt;option&gt;skewY(17deg)&lt;/option&gt;
+      &lt;option&gt;translate(100px, 100px)&lt;/option&gt;
+      &lt;option&gt;translateX(100px)&lt;/option&gt;
+      &lt;option&gt;translateY(100px)&lt;/option&gt;
+      &lt;option&gt;translateZ(100px)&lt;/option&gt;
+      &lt;option&gt;translate3d(50px, 50px, 50px)&lt;/option&gt;
+      &lt;option&gt;perspective(200px)&lt;/option&gt;
+      &lt;option&gt;matrix(1, 2, -1, 1, 80, 80)&lt;/option&gt;
+      &lt;option&gt;matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">main {
+  width: 400px;
+  height: 200px;
+  padding: 50px;
+  background-image: linear-gradient(135deg, white, cyan, white);
+}
+
+#example-element {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transition: transform 1.5s;
+  transform: rotate3d(1, 1, 1, 30deg);
+}
+
+.face {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: inherit;
+  font-size: 60px;
+  color: #fff;
+}
+
+.front {
+    background: rgba(90,90,90,.7);
+    transform: translateZ(50px);
+}
+
+.back {
+    background: rgba(0,210,0,.7);
+    transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(210,0,0,.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0,0,210,.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(210,210,0,.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(210,0,210,.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+.select-form {
+  margin-top: 50px;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const selectElem = document.querySelector('select');
+const example = document.querySelector('#example-element');
+
+selectElem.addEventListener('change', () =&gt; {
+  if(selectElem.value === 'Choose a function') {
+    return;
+  } else {
+    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
+    setTimeout(function() {
+      example.style.transform = 'rotate3d(1, 1, 1, 30deg)';
+    }, 2000)
+  }
+})</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}}</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', '#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>