CSS IMAGENES: CSS - orientación de imagen

La propiedad CSS describe cómo corregir la orientación predeterminada de una imagen .image orientation

Sintaxis

  image-orientation: 0deg;
image-orientation: 6.4deg;     /* Rounded to 0deg */
image-orientation: -90deg;     /* Equivalent to 270deg, its normalized computed value */
image-orientation: from-image; /* Use EXIF data from the image */
image-orientation: 90deg flip; /* Rotate 90deg, and flip it horizontally */
image-orientation: flip;       /* No rotation, only applies a horizontal flip */

/* Global values */
image-orientation: inherit;
image-orientation: initial;
image-orientation: unset;

Valores

from-image:

La información EXIF contenida en la imagen se utilizará para rotar la imagen adecuadamente.

<angle>

El <angle> de rotación para aplicar a la imagen. Se redondea al más cercano 90deg( 0.25turn).

flip

La imagen se voltea horizontalmente, es decir, se refleja, después de la rotación dada por el valor. Si no se da, 0degse utiliza.

Sintaxis Formal

  from-image <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a><a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> flip<a href="css/value_definition_syntax#brackets" title="Brackets">]</a>

Descripción

La propiedad CSS describe cómo corregir la orientación predeterminada de una imagen .image-orientation

Nota:

Esta propiedad no está destinada a realizar una rotación arbitraria en una imagen, sino a corregir una orientación errónea. Es por eso que se redondea al cuarto de vuelta más cercano.
De manera similar, esta propiedad no está destinada a manejar el diseño -> cambio de retrato. Como image-orientationafecta solo a las imágenes, no funcionará: los cambios deben ocurrir en el nivel de diseño.

Valor inicial	`0deg`
Se aplica a	todos los elementos
Heredado	si
Medios de comunicación	visual
valor calculado	un ^[1] <angle> redondeado al próximo cuarto de vuelta `0deg` y normalizado, que está modulando el valor por `1turn`
Animable	no
Orden canónico	el único orden no ambiguo definido por la gramática formal

^[1]El <angulo> El tipo de datos CSS representa valores de ángulo. Los ángulos positivos representan ángulos rectos. Los ángulos negativos representan ángulos izquierdos. Su sintaxis es <number> tipo de datos seguido inmediatamente por la unidad (grado, grado, rad o giro). Al igual que para cualquier dimensión de CSS no hay espacio entre el literal de la unidad y el número.

Compatibilidad con el navegador