Rotate3d file updated to md (#4360)

* docs: update to md

* Apply suggestions from code review

Co-authored-by: Juan Vásquez <juan@logicalbricks.com>

* fix: missing specificatiopns

* chore: highlighting variables

Co-authored-by: Alexander <alexander_belial999@hotmail.com>

Co-authored-by: Juan Vásquez <juan@logicalbricks.com>
Co-authored-by: Alexander <alexander_belial999@hotmail.com>

2 files changed, 320 insertions, 121 deletions

diff --git a/files/es/web/css/transform-function/rotate3d()/index.html b/files/es/web/css/transform-function/rotate3d()/index.html
deleted file mode 100644
index 86c5f44399..0000000000
--- a/files/es/web/css/transform-function/rotate3d()/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: rotate3d()
-slug: Web/CSS/transform-function/rotate3d()
-tags:
-  - CSS
-  - Funciones CSS
-  - Referencia
-translation_of: Web/CSS/transform-function/rotate3d()
----
-<div>{{CSSRef}}</div>
-
-<p>La función <code>rotate3d()</code> de CSS define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. La cantidad de movimiento está definida por el ángulo especificado; si es positivo, el movimiento será en el sentido de las agujas del reloj, si es negativo, será contrario a las agujas del reloj.</p>
-
-<p>En el espacio tridimencional, las rotaciones tienen tres grados de libertad, que describen un ángulo de rotación. El ángulo de rotación está definido por un vector [x, y, z] y pasa por el origen (como lo define la propiedad {{ cssxref("transform-origin") }} de CSS. Si el vector no está <em>normalizado</em>, lo que significa que la suma del cuadrado de sus tres coordenadas no es igual a 1, el mismo será normalizado internamente. Un vector no-normalizable, como es el caso del vector nulo, [0, 0, 0], causará que la rotación no sea aplicada, sin que esto invalide la propiedad CSS en su totalidad.</p>
-
-<div class="note">Contrario a las rotaciones en el plano, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas es crucial.</div>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<p>La cantidad de rotación creada por <code>rotate3d()</code> está especificada por tres {{cssxref("&lt;number&gt;")}}s y un {{cssxref("&lt;angle&gt;")}}. El <code>&lt;number&gt;</code>s representa las coordenadas x, y y z del vector, denotando los ejes de la rotación. El <code>&lt;angle&gt;</code> representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.</p>
-
-<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
-</pre>
-
-<h2 id="Valores">Valores</h2>
-
-<dl>
- <dt><em>x</em></dt>
- <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-x del vector y denota el eje de rotación.</dd>
- <dt><em>y</em></dt>
- <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-y del vector y denota el eje de rotación.</dd>
- <dt><em>z</em></dt>
- <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-z del vector y denota el eje de rotación.</dd>
- <dt><em>a</em></dt>
- <dd>Es un {{ cssxref("&lt;angle&gt;") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.</dd>
-</dl>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th>
-   <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th>
-   <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2">Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.</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>sen(<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>sen(<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>sen(<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>sen(<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="Ejemplos">Ejemplos</h2>
-
-<h3 id="Rotar_sobre_el_eje-X">Rotar sobre el eje-X</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
-&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed{
-  transform: rotate3d(1,0,0,60deg);
-  background-color: blue;
-}
-</pre>
-
-<h4 id="Resultado">Resultado</h4>
-
-<p>{{EmbedLiveSample("Rotating_on_the_X-axis","100%","200")}}</p>
-
-<h3 id="Rotar_sobre_un_eje_personalizado">Rotar sobre un eje personalizado</h3>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
-&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css">p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed{
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: blue;
-}
-</pre>
-
-<h4 id="Resultado_2">Resultado</h4>
-
-<p>{{EmbedLiveSample("Rotating_on_a_custom_axis","100%","200")}}</p>
-
-<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
-
-<p>Por favor vea el tipo de datos <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para información sobre compatibilidad.</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<p> </p>
-
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
-
-<p> </p>
diff --git a/files/es/web/css/transform-function/rotate3d()/index.md b/files/es/web/css/transform-function/rotate3d()/index.md
new file mode 100644
index 0000000000..c1c0ee7975
--- /dev/null
+++ b/files/es/web/css/transform-function/rotate3d()/index.md
@@ -0,0 +1,320 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+translation_of: Web/CSS/transform-function/rotate3d()
+browser-compat: css.types.transform-function.rotate3d
+---
+{{CSSRef}}
+
+La [función](/es/docs/Web/CSS/CSS_Functions) **`rotate3d()`** de [CSS](/es/docs/Web/CSS) define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. Su resultado es un tipo de dato {{cssxref("&lt;transform-function&gt;")}}.
+
+{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
+
+En el espacio tridimencional, las rotaciones tienen tres grados de libertad, juntos describen un ángulo de rotación. El ángulo de rotación está definido por un vector \[x, y, z] y pasa por el origen (como lo define la propiedad {{cssxref("transform-origin")}}. Si el vector no está _normalizado_ (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el  {{glossary("user agent")}} lo normalizará internamente. Un vector no-normalizable, como es el caso del vector nulo, \[0, 0, 0], causará que la rotación no sea aplicada, pero sin que esto invalide la propiedad CSS en su totalidad.
+
+> **Nota:** Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado.
+
+## Sintaxis
+
+La cantidad de rotación creada por `rotate3d()` está especificada por tres {{cssxref("&lt;number&gt;")}}s y un {{cssxref("&lt;angle&gt;")}}. El `<number>` representa las coordenadas _x_, _y_ y _z_ del vector, denotando los ejes de la rotación. El `<angle>` representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.
+
+```css
+rotate3d(x, y, z, a)
+```
+
+## Valores
+
+- `x`
+  - : Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-x del vector y denota el eje de rotación.
+- `y`
+  - : Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-y del vector y denota el eje de rotación.
+- `z`
+  - : Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-z del vector y denota el eje de rotación.
+- `a`
+  - : Es un {{ cssxref("&lt;angle&gt;") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Coordenadas cartesianas en ℝ^2</th>
+      <td rowspan="2">
+        Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.
+      </td>
+      </tr>
+    <tr>
+      <th scope="col">Coordenadas homogéneas en ℝℙ^2</th>
+    </tr>
+    <tr>
+      <th scope="col">Coordenadas cartesianas en ℝ^3</th>
+      <td>
+        <a
+          href="/es/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_cart.png"
+          ><img src="transform-functions-rotate3d_cart.png" /></a
+        ><math>
+          <mrow><mo>(</mo
+            ><mtable
+              ><mtr
+                ><mtd
+                  ><mn>1</mn>
+                  <mo>+</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                  <mo>(</mo>
+                  <msup
+                    ><mi>x</mi>
+                    <mn>2</mn> </msup
+                  ><mo>-</mo>
+                  <mn>1</mn>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mi>z</mi>
+                  <mo>·</mo>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>x</mi>
+                  <mi>y</mi>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mo>-</mo>
+                  <mi>y</mi>
+                  <mo>·</mo>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>x</mi>
+                  <mi>z</mi>
+                  <mo>·</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                </mtd></mtr
+              ><mtr
+                ><mtd
+                  ><mo>-</mo>
+                  <mi>z</mi>
+                  <mo>·</mo>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>x</mi>
+                  <mi>y</mi>
+                  <mo>·</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mn>1</mn>
+                  <mo>+</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                  <mo>(</mo>
+                  <mi>y2</mi>
+                  <mo>-</mo>
+                  <mn>1</mn>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mi>x</mi>
+                  <mo>·</mo>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>y</mi>
+                  <mi>z</mi>
+                  <mo>·</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                </mtd></mtr
+              ><mtr
+                ><mtd
+                  ><mi>y</mi>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>xz</mi>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mo>-</mo>
+                  <mi>x</mi>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>yz</mi>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mn>1</mn>
+                  <mo>+</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                  <mo>(</mo>
+                  <mi>z2</mi>
+                  <mo>-</mo>
+                  <mn>1</mn>
+                  <mo>)</mo> </mtd
+                ><mtd><mi>t</mi></mtd> </mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr
+              ></mtable
+            ><mo>)</mo></mrow
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="col">Coordenadas homogéneas en ℝℙ^3</th>
+      <td>
+        <a
+          href="/es/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_hom4.png"
+          ><img src="transform-functions-rotate3d_hom4.png"
+        /></a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Ejemplos
+
+### Rotar sobre el eje-Y
+
+#### HTML
+
+```html
+<div>Normal</div>
+<div class="rotated">Rotado</div>
+```
+
+#### CSS
+
+```css
+body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}
+
+### Rotar sobre un eje personalizado
+
+#### HTML
+
+```html
+<div>Normal</div>
+<div class="rotated">Rotado</div>
+```
+
+#### CSS
+
+```css
+body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}