From 9f958517af1854b65c73c6d46d6d7a3a5d2045a9 Mon Sep 17 00:00:00 2001 From: Anderson Vallejo <48649209+Vallejoanderson@users.noreply.github.com> Date: Wed, 9 Mar 2022 08:32:29 -0500 Subject: Rotate3d file updated to md (#4360) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: update to md * Apply suggestions from code review Co-authored-by: Juan Vásquez * fix: missing specificatiopns * chore: highlighting variables Co-authored-by: Alexander Co-authored-by: Juan Vásquez Co-authored-by: Alexander --- .../css/transform-function/rotate3d()/index.html | 121 -------- .../web/css/transform-function/rotate3d()/index.md | 320 +++++++++++++++++++++ 2 files changed, 320 insertions(+), 121 deletions(-) delete mode 100644 files/es/web/css/transform-function/rotate3d()/index.html create mode 100644 files/es/web/css/transform-function/rotate3d()/index.md 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() ---- -
{{CSSRef}}
- -

La función rotate3d() 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.

- -

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á normalizado, 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.

- -
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.
- -

Sintaxis

- -

La cantidad de rotación creada por rotate3d() está especificada por tres {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El <number>s 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.

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

Valores

- -
-
x
-
Es un {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación.
-
y
-
Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación.
-
z
-
Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación.
-
a
-
Es un {{ cssxref("<angle>") }} 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.
-
- - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ2Coordenadas homogéneas en ℝℙ2Coordenadas cartesianas en ℝ3Coordenadas homogéneas en ℝℙ3
Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. 1+(1-cos(a))(x2-1)z·sen(a)+xy(1-cos(a))-y·sen(a)+xz·(1-cos(a))-z·sen(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sen(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
- -

Ejemplos

- -

Rotar sobre el eje-X

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed{
-  transform: rotate3d(1,0,0,60deg);
-  background-color: blue;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Rotating_on_the_X-axis","100%","200")}}

- -

Rotar sobre un eje personalizado

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed{
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: blue;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Rotating_on_a_custom_axis","100%","200")}}

- -

Compatibilidad con los navegadores

- -

Por favor vea el tipo de datos <transform-function> para información sobre compatibilidad.

- -

Ver también

- -

 

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
- -

 

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("<transform-function>")}}. + +{{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("<number>")}}s y un {{cssxref("<angle>")}}. El `` representa las coordenadas _x_, _y_ y _z_ del vector, denotando los ejes de la rotación. El `` 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("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación. +- `y` + - : Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación. +- `z` + - : Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación. +- `a` + - : Es un {{ cssxref("<angle>") }} 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. + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ^2 + Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. +
Coordenadas homogéneas en ℝℙ^2
Coordenadas cartesianas en ℝ^3 + + (1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + x + 2 - + 1 + ) z + · + sin + ( + a + ) + + + x + y + ( + 1 + - + cos + ( + a + ) + ) - + y + · + sin + ( + a + ) + + + x + z + · + ( + 1 + - + cos + ( + a + ) + ) + - + z + · + sin + ( + a + ) + + + x + y + · + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + y2 + - + 1 + ) x + · + sin + ( + a + ) + + + y + z + · + ( + 1 + - + cos + ( + a + ) + ) + y + sin + ( + a + ) + + + xz + ( + 1 + - + cos + ( + a + ) + ) - + x + sin + ( + a + ) + + + yz + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + z2 + - + 1 + ) t 0 0 0 1) +
Coordenadas homogéneas en ℝℙ^3 + +
+ +## Ejemplos + +### Rotar sobre el eje-Y + +#### HTML + +```html +
Normal
+
Rotado
+``` + +#### 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 +
Normal
+
Rotado
+``` + +#### 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("<transform-function>")}} -- cgit v1.2.3-54-g00ecf